Vue<scss的使用和全局配置>

.scss和.css相比较有很大的优势，其中一个就是可以通过$定制全局的样式，函数等。
具体请参考sass官网 https://www.sass.hk/

首先你需要 npm install --s node-sass sass-loader

1.设置一个控制全局的.scss文件

image.png

2.在你需要用到的页面引入

image.png

需要注意的是，这种写法需要你在每个用到的页面都必须这样引入（直接在main.js引入 theme.scss是没有用的），所以教给大家一个配置全局scss的一个方法。

1.首先你需要 npm install --s sass-resources-loader
2.在build目录下找到utils.js文件

image.png
具体放置位置如图： image.png

具体代码如下：

 function generateSassResourceLoader() {
    let loaders = [
    cssLoader,
    'sass-loader',
    {
    loader: 'sass-resources-loader',
    options: {
    // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
    resources: path.resolve(__dirname, '../src/assets/css/theme.scss')
    }
    }
    ];
    if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
    })
    } else {
    return ['vue-style-loader'].concat(loaders)
    }
    }
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    // scss: generateLoaders('sass'),
    sass:generateSassResourceLoader(),
    scss:generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

---

重新 npm run dev 一下，然后就可以了。就不需要再在每个页面引入那个theme.scss文件了