标签：使用 static back loader 变量 编译 save function syntax
安装文件 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;
标签：使用 static back loader 变量 编译 save function syntax
原文地址：https://www.cnblogs.com/cyj7/p/13273927.html
