Конфигурация webpack 4 для react-toolbox

Я пытаюсь обновить свое приложение с 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]
  }
};

Но у меня возникают проблемы с импортом файлов 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? Также приветствуются любые подсказки о том, что может вызвать эти ошибки!

2
0
536
1

Ответы 1

Я изучаю react.js с помощью учебника стек с нуля и пытаюсь использовать компоненты react-toolbox.

Финнали, у меня есть рабочий демонстрация с webpack 4 и набором инструментов реакции, он основан на реагировать-набор инструментов-пример.

Это мои настройки:

  • добавить пакеты, связанные с 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': {} }, };

  • добавить правило веб-пакета

    ... { 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]' }

Вы можете увидеть все настройки в здесь, надеюсь, это сработает для вас.

Ссылка только ответы не приветствуются.

pptaszni 13.09.2018 09:18

Другие вопросы по теме