Question

尝试使用我的webpack构建一次导入_.global.scss文件的方法，而不是在每个.scss文件中导入它（我有一个每个组件的scss文件）。

我到目前为止找到的唯一可能的解决方案是使用行李装载机，但我无法使其正常工作。

我的webpack.config中的加载器如下所示：

＆＃13;

output_notebook

＆＃13;

谢谢！

Answer 1

您可以创建一个自定义加载程序，在所有scss文件中注入@import语句。

这是一个webpack.config.js文件：

var path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'build/bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loader: 'style!css!sass!' + path.resolve('loaders/inject-global-scss') 
      }
    ]
  }
}

此代码段假设您有一个loaders文件夹及其内部的inject-global-scss.js文件。

以下是此文件的内容：

module.exports = function(source) {
  this.cacheable();
  return `@import './src/_config/_global';
    ${source}`;
}

现在，我假设你在src / _config文件夹中有一个_global.scss文件。并且由于字符串模板语法，您正在使用节点5+。

如何只使用Webpack导入_global.scss文件一次，而不是每个单独的.scss文件？

1 个答案: