vue 单独引用sass文件

Posted 2020-12-16 cyj7

安装文件 sass-resources-loader：

npm install --save-dev sass-resources-loader

 修改build/utils.js:

全局文件引入 当然只想编译一个文件的话可以省去这个函数

function resolveResource(name) {  
  return path.resolve(__dirname, ‘../src/style/‘ + name);
}

function generateSassResourceLoader() {  
  var loaders = [
    cssLoader,  ‘sass-loader‘,
    {      
      loader: ‘sass-resources-loader‘,      
      options: { // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, ‘../static/style/common.scss‘
        resources: [resolveResource(‘theme.scss‘)]  
      }
    }
    ];   
 if (options.extract) {      
    return ExtractTextPlugin.extract({        
    use: loaders,        
    fallback: ‘vue-style-loader‘
    })
  } else {      
    return [‘vue-style-loader‘].concat(loaders)
  }
}

 将默认的sass配置改为 generateSassResourceLoader()

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders(‘less‘),
    // vue-cli默认sass配置
    // sass: generateLoaders(‘sass‘, { indentedSyntax: true }), 
    // scss: generateLoaders(‘sass‘),
    // 新引入的sass-resources-loader
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders(‘stylus‘),
    styl: generateLoaders(‘stylus‘)
}

改完配置后重启服务就可以在theme.scss里定义全局变量并在页面中引用了。

需要注意的是，scss里的变量是$开头，而less里的变量是@开头。比如我想定义一个项目的主色调变量，我可以在theme.scss里这样定义：

$main-color: #fd7a00;