如何在JS项目中解决这个css类问题？

Question

我正在尝试建立一个使用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;

// 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。

Answer 2

我能够解决我自己的问题。以下是修改后的有效的webpack文件：

​

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: /\.html$/, loader: 'html-loader' },   

     {
         test:  [/\.js$/, /\.jsx$/, /\.es6$/],
         include: [
           path.resolve(__dirname, 'src'),
         ],
         use: {
           loader: "babel-loader",
         },
       }, 
       
       {
      test: /\.(gif|svg|jpg|png)$/,
      loader: "file-loader",
      },
       
       {
         test: [/\.css/],
         include: [
         path.join(__dirname, 'src'),
         path.join(__dirname, 'node_modules'),
         path.join(__dirname, 'node_modules/react-toolbox'),
         ],
         use: [
           'style-loader',
           {
             loader: 'css-loader',
             options: {
                 modules: true,
             }
           }
         ]
      }, 
     ].concat(vtkRules),
   },

  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
  },
};

​