如何在启用CSS模块时排除引导程序文件
如何在启用CSS模块时排除引导程序文件
提问于 2017-05-27 08:15:02
通过在我的项目中启用css-loader的模块选项，我同时使用了引导和CSS模块，不幸的是，css-loader也在引导文件上应用了作用域。
我有一个app.scss，我正在导入所有的引导sass文件。然后将app.scss文件导入到我的app.js文件中：
import "./app.scss";
{ test: /\.scss$/,
use: [
{loader: "style-loader"},
{
loader: "css-loader",
options: {
sourceMap: true,
modules: true,
localIdentName: "[path][name]__[local]--[hash:base64:5]"
}
},
{loader: "sass-loader"}
]例如，bootstrap的.table类变成类似.app__table--19A_z的类
你觉得我该如何禁用引导文件的CSS模块？
回答 3
Stack Overflow用户
发布于 2017-08-02 14:20:06
它可以用来实现
条件不能匹配。约定是在这里提供一个字符串或字符串数组，但这并不强制执行。
因此，要排除引导scss文件，应如下所示：
{
test: /\.scss$/,
use: ...
exclude: [
path.resolve(__dirname, "node_modules/bootstrap"),
]
}Stack Overflow用户
发布于 2017-09-07 02:48:24
这不能简单地使用exclude来完成，因为您使用单个入口点将引导scss文件导入到您的应用程序的scss文件中。
使用:global选择器作用域也不能完全完成这项工作，但这绝对可以接近完成这项工作，特别是如果您没有使用postcss。
要查看关于此主题的正在进行的讨论，请查看此github问题：https://github.com/css-modules/css-modules/pull/65
Stack Overflow用户
发布于 2020-08-20 04:50:03
是的，Drew2的建议是非常有帮助的。将查询添加到引导css导入路径：
import 'bootstrap/dist/css/bootstrap.css?bootstrap'
import 'bootstrap/dist/js/bootstrap'
import App from './App'在webpack.config中使用"oneOf“作为css规则：
rules: [
...
{
test: /\.(css|pcss)$/,
oneOf: [
{
resourceQuery: /bootstarp/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
},
},
{
loader: 'postcss-loader',
options: { sourceMap: true },
},
],
},
{
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: {
localIdentName: mode === 'development' ? '[folder]_[name]_[local]_[hash:base64:5]' : '[hash:base64:8]',
},
},
},
{
loader: 'postcss-loader',
options: { sourceMap: true },
},
],
},
],
},
...
],或者使用include/exclude：
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'
import App from './App'
rules: [
...
{
test: /\.(css|pcss)$/,
exclude: /bootstrap\/dist\/css\/bootstrap\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: {
localIdentName: mode === 'development' ? '[folder]_[name]_[local]_[hash:base64:5]' : '[hash:base64:8]',
},
// exportOnlyLocals: false,
},
},
{
loader: 'postcss-loader',
options: { sourceMap: true },
},
],
},
{
test: /\.(css|pcss)$/,
include: /bootstrap\/dist\/css\/bootstrap\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
// exportOnlyLocals: false,
},
},
{
loader: 'postcss-loader',
options: { sourceMap: true },
},
],
},... ]
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44211666
复制相关文章
相似问题
腾讯云开发者
