sass变量使用 vue中全局引用sass变量 sass-resources-loader webpack配置

温故而知新

• SASS允许一个选择器，继承另一个选择器。
• @extend

　.class1 {
　　　　border: 1px solid #ddd;
　　}

• class2要继承class1，就要使用@extend命令：

	.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

• mixin

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

• 使用@include命令，调用这个mixin。

	　div {
　　　　@include left;
　　}
　　
　　@mixin left($value: 10px) { // 设置默认值
　　　　float: left;
　　　　margin-right: $value;
　　}

	div {
　　　　@include left(20px);
　　}

今日要在项目中 引入mixin的写法，但是需要每个模块都引入一次，比较麻烦。
便找了一种全局引入的方法，亲测有用

• 安装sass-resources-loader依赖
• 在main.js中引入mixin.scss
• 在vue-config.js中进行配置
• vue-cli@3

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources
          resources: './path/to/resources.scss',

          // Or array of paths
          resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
        })
        .end()
    })
  }
}

• vue-cli@2

if (loader === 'sass') {
  loaders.push({
    loader: 'sass-resources-loader',
    options: {
      resources: 'path/to/your/file.scss',
    },
  });
}

• webpack 4

 module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
        ]
      },
      {
        test: /\.scss$/,
        use: [
          { loader: 'vue-style-loader' },
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
          { loader: 'sass-resources-loader',
            options: {
              sourceMap: true,
              resources: [
                resolveFromRootDir('src/styles/variables.scss'),
              ]
            }
          }
        ]
      }
    ]
  }

• 配置好后，重启服务，在需要的组件中直接用就好

sass-resources-loader原码链接