从 node_modules 导入的 React/Webpack Css 未正确加载

Question

我正在使用来自各种包的这三个 css 导入：

// want to do import 'path/to/css.css'
import slickCss from "slick-carousel/slick/slick.css"
import slickCssTheme from "slick-carousel/slick/slick-theme.css"
import leafcss from 'leaflet/dist/leaflet.css'

console.log(`Slick Css: `, slickCss)
console.log(`Slick Theme Css: `, slickCssTheme)
console.log(`leaf css: `, leafcss)

如果我将它们注销，它们都是空对象：

Slick Css:  {}
Slick Theme Css:  {}
leaf css:  {}

我认为我使用 webpack 加载器的方式出了点问题。在大多数情况下，我可以看到其他一切都在反应包中工作。现在我将把我的 webpack 附加到不太复杂的东西上。如果 webpack 没有问题，我将开始添加必要的文件。我尝试了别名，仍然得到相同的结果。

var path = require(`path`)

module.exports = {
  mode: `development`,
  entry: `./scripts/inject.js`,
  output: {
    path: path.resolve(__dirname, `dist`),
    filename: `bundle.js`,
  },
  resolve: {
    extensions: [`.html`, `.js`, `.json`, `.scss`, `.css`],
    alias: {
      leafModule: __dirname + `/node_modules/leaflet/dist/leaflet.css`,
    },
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: `file-loader`,
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: `file-loader`,
            options: {
              name: `[name].[ext]`,
              outputPath: `fonts/`,
            },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: [`style-loader`, `css-loader`],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use:  {
          loader: `babel-loader`,
          options: {
            presets: [`@babel/preset-env`],
          },
        }, 
      },  
    ],
  }, 
}

Answer 1

我不确定您的设置能否正确收集您的样式。在我看来，你可以使用mini-css-extract-plugin 来帮助你收集你的css。以下是您可以添加到 webpack.config.js 的附加代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
 // ...
 modules: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,            
        },
        {
          loader: `css-loader`,
          options: {
            // Enable css as module so we can import
            modules: true,
          },
        },
      ],
    },
  ],
 },

 plugins: [
  // ...
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
  }),
 ]
}

但是，请记住，如果您将 css 切换到模块，它不会再自动注入，因为每个类名都将被重命名，因此您必须手动导入和添加：

import css from "path/to/css";

<div classSName={css.headerClass} />

因此，您将无法使用具有 css 文件作为您的情况导入的第三个包。