Question

我使用react-react-app。我设置了url: false，并启用了CSS模块。

webpack.gonfig.dev.js(module/ rules): 
       {
        test: /\.css$/,
        use: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader"),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]___[hash:base64:5]",
              url: false
            }
          }
        ]
      },

webpack.config.prod.js：

                {
                  loader: require.resolve("css-loader"),
                  options: {
                    importLoaders: 1,
                    modules: true,
                    url: false,
                    minimize: true,
                    sourceMap: shouldUseSourceMap
                  }
                },

./ index.css背景不起作用（如果我使用绝对路径，则可以起作用）：

.whiteBoardMainSection {
background-image: url(../../assets/white-board-hospital.png);

}

导入CSS

import styles from "./index.css";

Answer 1

当node_modules中的网址抛出err时，我不应该使用url: false。我应该在加载程序中添加exclude: [/node_modules/]。

          {
        test: /\.css$/,
        use: [
          require.resolve("style-loader"),
          {
            loader: require.resolve("css-loader"),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]___[hash:base64:5]"
            }
          }
        ],
        exclude: [/node_modules/]
      },

使用CSS模块

1 个答案: