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';

以及

@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组件。

最后，我在demo上使用了webpack 4和react-toolbox，它基于react-toolbox-example。

这是我的设置：

添加css-modules个相关软件包

$ npm install postcss postcss-cssnext postcss-import postcss-loader css-loader style-loader
添加一个postcss.config.js

module.exports = { plugins: { 'postcss-import': { root: __dirname, }, 'postcss-cssnext': {} }, };
添加Webpack规则

... { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, sourceMap: true, importLoaders: 1, localIdentName: '[name]--[local]--[hash:base64:8]' } }, 'postcss-loader' ]}, ...
添加cmrh.conf.js-使用css-modules-require-hook进行SSR（可选）

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

您可以在here中查看所有设置，希望它对您有用。

Webpack 4配置为react-toolbox

1 个答案: