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

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 切换到模块，它将不再自动注入，因为每个 class 名称都将被重命名，因此您必须手动导入和添加，如：

import css from "path/to/css";

<div classSName={css.headerClass} />

因此，您将遇到第 3 个包的问题，其中有 css 个文件要作为您的案例导入。