vue中配置全局sass

1.vue-cli搭建脚手架

2、安装sass依赖包

npm install --save-dev sass-loader
npm install --save-dev node-sass

3、然后在build文件夹下的webpack.base.conf.js的rules里面添加配置：

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

4，现在可以直接用，vue但页面中sass，如果是文件，每个页面都要@import

<style lang="scss"></style>

5，通过webpack配置全局 sass

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

然后在 build 文件夹下找到 util.js 修改sass编译器loader的配置，直接把下面的代码复制进去即可：

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)
    }
  }

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

6、theme.scss文件中样式的写法

$list-ui-bg: #ffc309;
$list-ui-color: white;
$list-ui-bg-add: #68cdfd;