我正在尝试使用 Javascript 构建单页 html 应用程序。我在同一文件夹“src”中有 css 文件以及 index.js 文件。我的 webpack.config.js 文件如下:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [{
test: [/\.js$/, /\.jsx$/, /\.es6$/],
include: [
path.resolve(__dirname, 'src'),
],
use: {
loader: "babel-loader"
},
}, {
test: [/\.css/],
exclude: path.resolve(__dirname, 'src'),
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]__[local]-[hash:base64:5]'
}
}
]
}, {
test: [/\.css/],
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader'
]
}]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};
这是我的 GeometryViewer.module.css 文件:
.button {
position: absolute;
right: 5px;
top: 5px;
width: 1em;
z-index: 2;
cursor: pointer;
}
.rootController {
display: flex;
flex-direction: column;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
z-index: 1;
}
.control {
display: flex;
flex-direction: row;
flex: 1;
align-items: center;
}
.fullScreen {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
}
.fullParentSize {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bigFileDrop {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
background-image: url('./dropBG.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border-radius: 10px;
width: 50px;
padding: calc(50vh - 2em) calc(50vw - 25px - 2em);
cursor: pointer;
}
.selector {
background: transparent;
border: none;
margin: 5px;
z-index: 1;
max-width: 100px;
min-width: 100px;
}
label.selector {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
}
select:focus {
outline: none;
border: none;
}
.progress {
flex: none;
font-size: 50px;
color: white;
z-index: 1;
background: rgba(128,128,128,.5);
padding: 20px;
border-radius: 10px;
user-select: none;
}
.dark {
composes: selector;
color: white;
}
.dark option {
color: black;
}
.light {
composes: selector;
color: black;
}
.light option {
color: white;
}
.fpsMonitor {
position: absolute;
bottom: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
border: solid 1px gray;
}
当我尝试使用构建元素时
npm run build
我收到这个错误:
ERROR in ./src/GeometryViewer.module.css (./node_modules/css-loader!./src/GeometryViewer.module.css)
Module build failed (from ./node_modules/css-loader/index.js):
Error: composition is only allowed when selector is single :local class name not in ".dark", ".dark" is weird
如果能帮助我确定我可能做错了什么,我将不胜感激。
最佳答案
错误会告诉您问题的确切位置。当选择器是单个 :local
类名时,您不允许组合。如果该组件是您的,那么您将需要更新样式。
如果组件不是您的而是 node_module 的一部分(看起来是),您可能需要更改在元素中进行导入的方式。 There is a lot of discussion here about how to resolve that .
关于javascript - 我该如何解决 JS 元素中的这个 css 类问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53401321/