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

Posted

技术标签:

【中文标题】Webpack - 在所有其他 scss 模块中自动包含配置 scss 文件【英文标题】:Webpack - include automatically a config scss file in all the other scss module 【发布时间】:2017-08-10 10:07:35 【问题描述】:

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

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

【问题讨论】:

【参考方案1】:

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


    loader: "sass-loader",
    options: 
        data: '@import "config-styles";'
        includePaths: includePaths
    

【讨论】:

它适用于 data 选项,而不是 incudePaths 它不起作用(我使用的是 sass-loader 4.4.2) 【参考方案2】:

这在sass-loader的最新版本中有所改变:


  loader: 'sass-loader',
  options: 
    additionalData:
      '@import "config-styles";',
  ,


【讨论】:

以上是关于Webpack - 在所有其他 scss 模块中自动包含配置 scss 文件的主要内容,如果未能解决你的问题,请参考以下文章

使用 Webpack、SASS 和 React 在“main.scss”上出现错误“找不到模块”

webpack

Webpack 3 + Sass Loader:不能将 scss 用作模块

Webpack知识点速记

Scss中的自定义函数

如何使用 Typescript、React 和 Webpack 导入 SCSS 或 CSS 模块