javascript - 使用 css-modules 时，后台 url 中的相对路径不起作用

Question

我使用反应反应应用程序。我设置url: false并启用 css-modules。

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

标签： javascriptcssreactjswebpackcss-modules

Answer 1

url: false当 node_modules 中的 url 抛出错误时， 我不应该使用它。我应该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/]
      },