在 webpack 中反应多个 css 加载器
React multiple css loaders in webpack
我正在使用 react-bootstrap 和 css 模块。在我的 webpack.config.js 中,我可以 运行 我的 bootstrap.css 使用此配置:
{ test: /\.css$/, loader: "style-loader!css-loader" }
但是我的 css 模块应该有这个设置:
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}
我如何将它们结合起来以使其适用于 css 模块和 react-bootstrap
您可以保留两个加载程序:一个用于 全局 CSS(如 Bootstrap),另一个用于 CSS 模块.
为了避免具有相同 test
属性 的加载器之间的冲突,请使用 webpack 的规则 include and exclude 属性:
{
test: /\.css$/,
loader: "style-loader!css-loader",
include: [
/* Paths to Bootstrap and further global CSS only */
]
},
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName[path]___[name]__[local]___[hash:base64:5]'
],
include: [
/* eg. Paths to your source directory */
]
}
我正在使用 react-bootstrap 和 css 模块。在我的 webpack.config.js 中,我可以 运行 我的 bootstrap.css 使用此配置:
{ test: /\.css$/, loader: "style-loader!css-loader" }
但是我的 css 模块应该有这个设置:
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
}
我如何将它们结合起来以使其适用于 css 模块和 react-bootstrap
您可以保留两个加载程序:一个用于 全局 CSS(如 Bootstrap),另一个用于 CSS 模块.
为了避免具有相同 test
属性 的加载器之间的冲突,请使用 webpack 的规则 include and exclude 属性:
{
test: /\.css$/,
loader: "style-loader!css-loader",
include: [
/* Paths to Bootstrap and further global CSS only */
]
},
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName[path]___[name]__[local]___[hash:base64:5]'
],
include: [
/* eg. Paths to your source directory */
]
}