Webpack 4 react-toolbox配置

Question

我试着把我的应用从webpack 2升级到了webpack 4.16.5。因为我不想再次陷入难以理解的数百行配置中，所以我从最低配置开始。这是我的当前状态：

const path = require("path");

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const context = path.resolve(__dirname, "app");

module.exports = {
  entry: {
    home: "./index.js"
  },
  context,

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.(css|sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader"
          },
          {
            loader: "postcss-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  resolve: {
    extensions: [".js", ".jsx", ".css", "json"],
    modules: [path.resolve(__dirname, "node_modules"), context]
  }
};

但我在从react-toolbox导入CSS文件时遇到问题，即：

import Dialog from 'react-toolbox/lib/dialog';

在js文件中，并且还

@import "react-toolbox/lib/button/theme.css";

导致如下错误：

ERROR in ../node_modules/react-toolbox/lib/switch/theme.css (../node_modules/css-loader!../node_modules/postcss-loader/src!../node_modules/sass-loader/lib/loader.js!../node_modules/react-toolbox/lib/switch/theme.css)
    Module build failed (from ../node_modules/css-loader/index.js):
    Error: composition is only allowed when the selector is single: local class name not in ".disabled", ".disabled" is weird

有没有可以使用wbpack4和react-toolbox的应用程序？此外，欢迎任何可能导致这些错误的提示！

Answer 1

我正在通过js stack from scratch教程学习react.js，并尝试使用react-toolbox组件。

最后，我有了一个基于react-toolbox-example的，与webpack 4和react-toolbox一起工作的demo。

这是我的设置：

• 添加与css-modules相关的包

$ npm install postcss postcss-cssnext postcss-import postcss-loader css-loader style-loader

• add a postcss.config.js

module.exports = { plugins: { 'postcss-import': { root: __dirname, }, 'postcss-cssnext': {} }, };

• add a webpack法则

... { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, sourceMap: true, importLoaders: 1, localIdentName: '[name]--[local]--[hash:base64:8]' } }, 'postcss-loader' ]}, ...

• add cmrh.conf.js -将css-modules-require-hook用于SSR(可选)

module.exports = { generateScopedName: '[name]--[local]--[hash:base64:8]' }

你可以在here中看到所有的设置，希望它能为你工作。