节点模块的 CSS
Posted
技术标签:
【中文标题】节点模块的 CSS【英文标题】:Css of node-modules 【发布时间】:2019-12-19 14:57:16 【问题描述】:我在我的 react 应用程序中使用 css 模块。在webpack.config.js
中设置modules:true
后,我可以从我在src 文件夹中创建的文件中获取css。我正在从节点模块导入一些组件。但是节点模块中存在的组件的 css 没有得到应用。
我还尝试使用 import 'path' 导入节点模块的 css;但它没有工作。
如果我设置modules:false
,节点模块的 css 将被应用,而 src 文件夹中的文件 css 不会被应用。
webpack.config.js
module.exports =
module:
rules: [
test: /\.css$/,
use: [
loader: "style-loader"
,
loader: "css-loader",
options:
modules: true,
,
],
,
],
,
;
【问题讨论】:
从节点模块导入的所有css都不起作用?或者你不能覆盖它们? 这不应该发生,因为您从节点模块导入样式,例如:导入“路径”而不将它们分配给任何对象。 【参考方案1】:这可能是由于您使用的节点模块可能不遵循模块语法。我的意思是他们可能直接用字符串设置类,而不是像style.someClassName
这样使用。因此,您的规则中需要 2 个条目,1 个用于您的东西,1 个用于节点模块。
例如:
module.exports =
module:
rules: [
test: /\.css$/,
exclude: /node_modules/,
use: [
loader: "style-loader"
,
loader: "css-loader",
options:
modules: true,
,
],
,
test: /\.css$/,
include: /node_modules/,
use: [
loader: "style-loader"
,
loader: "css-loader",
options:
modules: false,
,
],
],
,
;
【讨论】:
以上是关于节点模块的 CSS的主要内容,如果未能解决你的问题,请参考以下文章