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

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

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

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

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

   
   
   在这里插入图片描述

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

   
   
   在这里插入图片描述
   
   

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

3. 首先你需要 npm install --s sass-resources-loader

4. 在build目录下找到utils.js文件

   
   
   在这里插入图片描述
   
   

   具体放置位置如图：

   
   
   在这里插入图片描述
   
   具体代码如下：

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/styles/global.scss')
        }
      }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

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