如何仅使用 Webpack 导入 _global.scss 文件一次，而不是在每个 .scss 文件中导入？答案

【问题标题】：How to import a _global.scss file with Webpack only once, and not in every single .scss file?如何仅使用 Webpack 导入 _global.scss 文件一次，而不是在每个 .scss 文件中导入？
【发布时间】：2016-07-20 05:55:39
【问题描述】：

试图找到一种方法将 _.global.scss 文件与我的 webpack 构建一起导入一次，而不是在每个 .scss 文件中导入它（每个组件都有一个 scss 文件）。

到目前为止，我发现的唯一可能的解决方案是使用行李装载机，但我无法让它工作。

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

loaders: [{
            test: /\.scss$/,
            loader: "style-loader!raw-loader!sass-loader"
                + "!baggage?"+ path.resolve(__dirname, "./src/_config/_global.scss")
        }]

谢谢！

【问题讨论】：

对不起，我完全误解了你的问题......你不应该有类似的东西：loader：'style！css！sass' -

标签： webpack sass-loader

【解决方案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') 
      }
    ]
  }
}

这个 sn-p 假设您有一个 loaders 文件夹，其中有一个 inject-global-scss.js 文件。

这是该文件的内容：

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

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

【讨论】：

谢谢！这正是我想要的。
在其中有一个 inject-global-scss.js 文件 -- 我必须将文件名更改为 index.js 才能使其工作。
@vintem 你知道一种方法可以做到这一点，并且仍然可以使用内置的 sass 方法，如 darken()？