Webpack - 在所有其他 scss 模块中自动包含一个配置 scss 文件

Question

我有这样一个样式文件的项目结构:

client/
config-style.scss
------components/
------style.scss
-----------------my_component/
-----------------style.scss

在所有的 style.scss 文件中，都有特定组件的本地样式。

在 config-style.scss 中有所有其他文件使用的变量，例如:

$font-size-large: 30px

实际上我使用以下方法在每个 style.scss 文件中导入 config-style.scss 文件:

@import "../style.scss";

我还使用 webpack 生成带有 ExtractTextPlugin 的 main.scss 文件

    {
            test: /\.(css|scss)$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use:  [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[name]-[local]___[hash:base64:5]'
                        }
                    },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ]
            })
        }

有没有办法告诉 webpack 在所有其他 .scss 文件中自动包含 config-style.scss ？

Answer 1

是的，有一种方法可以注入(inject)常见的 scss 文件。您可以在选项下指定您的导入。也可以提供 includePaths。这是语法。让我知道它是否适合你:)

使用 Dart Sass 和现代 API:

{
    loader: "sass-loader",
    options: {
        additionalData: '@import "config-styles";',
        sassOptions: {
            includePaths: ['src/styles']
        }
    }
}

使用旧 API:

{
    loader: "sass-loader",
    options: {
        data: '@import "config-styles";',
        includePaths: ['src/styles']
    }
}