javascript - 我该如何解决 JS 元素中的这个 css 类问题？

Question

我正在尝试使用 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

如果能帮助我确定我可能做错了什么，我将不胜感激。

Answer 1

错误会告诉您问题的确切位置。当选择器是单个 :local 类名时，您不允许组合。如果该组件是您的，那么您将需要更新样式。

如果组件不是您的而是 node_module 的一部分(看起来是)，您可能需要更改在元素中进行导入的方式。 There is a lot of discussion here about how to resolve that .