通过 sass-resources-loader 全局注册 Sass/Less 变量

使用webpack引入sass/less全局变量

sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变量值，编译后所有用到该变量的样式都会被修改为你想要的效果，但是在vue-cli搭建的项目中，在main.js中全局引入一个scss文件，在其中定义变量在其他组件或者页面中引用报变量未定义错误，其他的样式可以正常显示，显然是编译的问题。

傻瓜式引用

       在每个用到全局变量的组件都引入该全局样式文件

@import 'path/fileName.scss'

但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。

 

安装sass-resources-loader

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

修改sass配置

 

// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
  return path.resolve(__dirname, '../static/style/' + name);
}
function generateSassResourceLoader() {
  var loaders = [
    cssLoader,
    'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // 多个文件时用数组的形式传入，单个文件时可以直接使用 path.resolve(__dirname, '../static/style/common.scss'
        resources: [resolveResource('common.scss')]  
      }
    }
    ];
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

修改sass配置的调用为 generateSassResourceLoader()

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // vue-cli默认sass配置
    // sass: generateLoaders('sass', { indentedSyntax: true }), 
    // scss: generateLoaders('sass'),
    // 新引入的sass-resources-loader
    sass: generateSassResourceLoader(),
    scss: generateSassResourceLoader(),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

 

在 main.js 中引用 common.scss 文件，重启服务，其中定义的变量在其他组件就可以使用了。

 

以上的方法都来自网上的资料，如果您的项目恰巧有如上的配置，那么恭喜您，您的问题已经完美解决。如果您的项目里没有类似的配置结构，那么也恭喜你，你的问题即将解决

/* Webpack@2: webpack.config.js */
 
module: {
  rules: [
    // Apply loader
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-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']
          },
        },
      ],
    },
  ],
},
 
/* Webpack@1: webpack.config.js */
 
module: {
  loaders: [
    // Apply loader
    { test: /\.scss$/, loader: 'style!css!sass!sass-resources' },
  ],
},
 
// Provide path to the file with resources
sassResources: './path/to/resources.scss',
 
// Or array of paths
sassResources: ['./path/to/vars.scss', './path/to/mixins.scss'],

Example of Webpack 4 Config for Vue

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'),
              ]
            }
          }
        ]
      }
    ]
  }

VueJS webpack template(vue-cli@2)

If you wish to use this loader in the VueJS Webpack template you need to add the following code in build/utils.js after line 42 :

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

VueJS webpack template(vue-cli@3)

If you are using vue-cli@3, you need create a vue.config.js file in your project root(next to package.json). Then, add the following code :

// 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']
        })
        .end()
    })
  }
}

完活。