Javascript 如何在JS项目中解决这个css类问题?
我正在尝试使用Javascript构建一个单页html应用程序。我将css文件与index.js文件放在同一个文件夹“src”中。我的webpack.config.js文件如下:Javascript 如何在JS项目中解决这个css类问题?,javascript,html,css,Javascript,Html,Css,我正在尝试使用Javascript构建一个单页html应用程序。我将css文件与index.js文件放在同一个文件夹“src”中。我的webpack.config.js文件如下: var path=require('path'); var webpack=require('webpack'); var vtkRules=require('vtk.js/Utilities/config/dependency.js')。webpack.core.rules; //如果要加载*.css和*.modu
var path=require('path');
var webpack=require('webpack');
var vtkRules=require('vtk.js/Utilities/config/dependency.js')。webpack.core.rules;
//如果要加载*.css和*.module.css文件,则为可选
//var cssRules=require('vtk.js/Utilities/config/dependency.js')。webpack.css.rules;
var entry=path.join(uu dirname,'./src/index.js');
const sourcePath=path.join(_dirname,'./src');
const outputPath=path.join(uu dirname,'./dist');
module.exports={
进入
输出:{
路径:outputPath,
文件名:“MyWebApp.js”,
},
模块:{
规则:[{
测试:[/\.js$/,/\.jsx$/,/\.es6$/],
包括:[
解析(uu dirname,'src'),
],
使用:{
加载器:“巴别塔加载器”
},
}, {
测试:[/\.css/],
排除:path.resolve(uu dirname,'src'),
使用:[
“样式加载器”,
{
加载器:“css加载器”,
选项:{
模块:对,
localIdentName:“[name]\u u[local]-[hash:base64:5]”
}
}
]
}, {
测试:[/\.css/],
包括:path.resolve(uu dirname,'src'),
使用:[
“样式加载器”,
“css加载器”
]
}]
},
决心:{
模块:[
解析(uuu dirname,'node_modules'),
源路径,
],
},
};代码>错误告诉您问题的确切位置。当选择器为单个:local
类名时,不允许编写。如果该组件是您的,则需要更新样式
如果该组件不是您的组件,并且是node_模块的一部分(看起来是),您可能需要更改在项目中导入的方式 我能够解决我自己的问题。以下是有效的修订网页文件:
var path=require('path');
var webpack=require('webpack');
var vtkRules=require('vtk.js/Utilities/config/dependency.js')。webpack.core.rules;
//如果要加载*.css和*.module.css文件,则为可选
//var cssRules=require('vtk.js/Utilities/config/dependency.js')。webpack.css.rules;
var entry=path.join(uu dirname,'./src/index.js');
const sourcePath=path.join(_dirname,'./src');
const outputPath=path.join(uu dirname,'./dist');
module.exports={
进入
输出:{
路径:outputPath,
文件名:“MyWebApp.js”,
},
模块:{
规则:[
{test:/\.html$/,loader:'html loader'},
{
测试:[/\.js$/,/\.jsx$/,/\.es6$/],
包括:[
解析(uu dirname,'src'),
],
使用:{
加载器:“巴别塔加载器”,
},
},
{
测试:/\(gif | svg | jpg | png)$/,
加载器:“文件加载器”,
},
{
测试:[/\.css/],
包括:[
join(uu dirname,'src'),
join(uuu dirname,'node_modules'),
join(uuu dirname,'node_modules/react toolbox'),
],
使用:[
“样式加载器”,
{
加载器:“css加载器”,
选项:{
模块:对,
}
}
]
},
].concat(vtkRules),
},
决心:{
模块:[
解析(uuu dirname,'node_modules'),
源路径,
],
},
};代码>安装加载程序npm安装--保存开发风格加载器
或/和npm安装风格加载器css加载器
能否发布/src/GeometryViewer.module.css
?我已经尝试过installe加载器,npm安装--保存开发风格加载器和npm安装风格加载器css加载器。还不走运,谢谢。在充分披露我不是一个JS程序员太多。这个部件不是我的。如何导入和“更新样式”?很抱歉,我直到现在才在上面的答案中看到您的问题。您应该知道,您配置的这个加载程序会将所有.css文件视为css模块。如果您有任何依赖项中的任何普通CSS(因为我看到您包括node_modules文件夹),您可能会遇到问题。我建议您为启用模块的.module.css
配置单独的规则,并从禁用模块的其他加载程序中排除.module.css
。