[英]Unable to skip 3rd party library CSS from CSS-Module transformation
我第一次使用 React 和 Webpack 尝试 CSS Modules,我遇到了至少三种实现它的方法:
我使用babel-plugin-react-css-modules
来平衡代码的简单性和性能,除了一件事之外,一切似乎都运行良好:我的 3rd 方库(Bootstrap 和 Font Awesome)也包含在 CSS Modules 转换中。
<NavLink to="/about" styleName="navigation-button"></NavLink>
以上将正确转换的className
分配给NavLink
。 但是,内部的span
需要引用全局样式才能呈现图标。
<span className="fa fa-info" />
上面的 span 没有分配一个预期的转换className
,但是我的捆绑样式表没有这些 CSS 类,因为它们被转换成其他东西,以模拟本地范围。
以下是我的.babelrc
文件中用于激活babel-plugin-react-css-modules
:
{
"presets": ["env", "react"],
"plugins": [
["react-css-modules", {
"generateScopedName": "[name]__[local]___[hash:base64:5]",
"filetypes": {
".less": {
"syntax": "postcss-less"
}
}
}]
]
}
在我的 Webpack 配置中,下面是为转换配置css-loader
的部分:
{
test: /\.(less|css)$/,
exclude: /node_modules/,
use: extractCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
minimize: true,
modules: true,
sourceMap: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
loader: 'less-loader'
}
]
})
}
据我所知,上面的规则应该排除库样式表,我还尝试专门为排除的样式表添加另一条规则,但这似乎不起作用,因为我猜这些样式表仍然使用原始规则进行了转换。
为了从两个库中导入 CSS,我在父样式表中有以下两行声明了一些全局样式:
@import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import '../../../node_modules/font-awesome/css/font-awesome.min.css';
我发现以下这两种方法可能会有所帮助:
简而言之,到目前为止,似乎没有选项可以忽略/排除某些路径被 css-modules webpack 插件模块化。 理想情况下,插件应该支持它,但您可以尝试以下一些方法:
使用两个 webpack 规则来利用 webpack 规则排除/包含:
module.exports = {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path]__[local]___[hash:base64:5]',
},
},
],
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader']
}
]
}
...或者,从上面的第二个答案中注入 webpack 的 getLocalIdent以手动排除某些路径。
const getLocalIdent = require('css-loader/lib/getLocalIdent');
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
return loaderContext.resourcePath.includes('semantic-ui-css') ?
localName :
getLocalIdent(loaderContext, localIdentName, localName, options);
}
}
}
对我来说,使用:global
有效:
.my-component {
:global {
.external-ui-component {
padding: 16px;
// Some other styling adjustments here
}
...
}
}
Ps:要使用 webpack 配置来做,请参阅另一个答案。
从play771更新解决方案
{
loader: 'css-loader',
options: {
modules: {
auto: (resourcePath) => !resourcePath.includes('node_modules'),
localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.