孟欣 - less/scss引入公共文件，sass-resources-loader

sass-resources-loader

在前端项目中，比如用less/scss想要封装一个公共的文件，或统一引用一个公共变量会发现

在入口文件，引入或声明是无效的，用的时候还是会报错。

那么sass-resources-loader恰好解决了这个问题

它在打包的时候将资源放在每个文件中，而无需一一引用，例如：

const loader = [
  'vue-style-loader',
  {
    loader: 'css-loader',
    options: { minimize: isProd }
  },
  'postcss-loader',
  'sass-loader', 
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/common/common.scss')
    }
  }
]

// webpack的module
module: {
    rules: [
      {
        test: /\.scss$/,
        use: isProd ? ExtractTextPlugin.extract({
          use: loader,
          fallback: 'vue-style-loader'
        }) : loader
      }
    ]
  },

 

来源：CSDN

作者：孟欣的博客

链接：https://blog.csdn.net/mx18519142864/article/details/104251234