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”上出现错误“找不到模块”