vue-cli2.0 sass/scss全局变量设置

  1. npm install --save-dev [email protected]
  2. npm install --save-dev node-sass
  3. npm install --save-dev sass-resources-loader

找到build/webpack.base.conf.js 文件下module.rules 添加以下代码

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}

build/utils.js文件 scss 改成以下形式

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/style/_variable.scss')
      }
    }),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
}

_variable.scss

$bgColor: #000;

App.vue


最后结果
vue-cli2.0 sass/scss全局变量设置_第1张图片

你可能感兴趣的:(vue,css,vue.js,node.js)