在Webpack 5中禁用解析CSS/SASS/SCSS/LESS URL。

Question

在SASS中，我有一个带有URL的CSS规则，看起来像这样：

.eSearchFAQsAccord-q {
  &::after {
    content: url("./images/caret.svg");
  }
}

默认情况下，Webpack会解析它(尽管它对我的SVG文件产生了问题)。我希望Webpack不要解析它。我希望浏览器从我的static目录中单独加载此图像。

到目前为止，我尝试了很多来自网络上的WebPack配置设置，但都没有奏效...

这是我的WebPack配置文件，我认为它相当基本:

const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: `./src/index.js`,
  },
  target: "web",
  output: {
    path: `${__dirname}/dist`,
    filename: "[name].js",
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: "static" }],
    }),
  ],
  devServer: {
    hot: true,
    inline: true,
    host: "localhost",
    port: 8080,
    watchOptions: {
      poll: true,
    },
  },
  module: {
    rules: [
      {
        
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
};

我相信我的问题在于我对Webpack的了解不够深入，但我认为文档并不是一眼就能看懂的。

- BBaysinger

---

你是否正在使用css-loader？如果是，请尝试将其移除。https://webpack.js.org/loaders/css-loader/ - sol

是的，我认为我的配置接近默认设置……这是否意味着这是禁用该功能的方法？彻底放弃css-loader吗？ - BBaysinger

你为什么需要在CSS中使用webpack呢？唯一需要的情况是你正在使用styled components（例如导入CSS文件的JS代码，在许多情况下并不推荐）。对于普通页面CSS，你根本不需要webpack，只需将Sass编译为CSS并将其加载到HTML模板中的<link>元素中即可。 - Mike 'Pomax' Kamermans

所以，我有一个“啊哈”瞬间，我可以关闭css-loader并在.css文件中实现content，但这对我来说似乎是一个变通方法... 将来，我应该询问是否有一个设置，可以在我的SASS/SCSS中完成这个操作。这可能吗？ - BBaysinger

为了组织起见，我是否真的需要创建一个单独的文件，让单个CSS规则与相关样式分开存放？我可以接受这种做法，但想知道这是唯一的方法吗？ - BBaysinger

Answer 1

我认为Webpack 5的css-loader默认解析了这些url()调用，如果需要禁用它，您需要手动进行设置：

        loader: "css-loader",
        options: {
          // Add this option
          url: false,
        },

文档中有更多内容

也许你的其他加载器有相同的选项，但我几乎可以确定你只需要在css-loader中禁用它。

- Danila

---

当然，这很简单。我天真地尝试在sass-loader和css-loader中设置参数，结果出现了错误。但是一旦我只按照你说的做，它就起作用了。我认为一个要点是似乎不应该期望它们具有类似的选项和配置，而是一个的特性在另一个中会是多余的，因为它们旨在一起使用。很酷...谢谢！ - BBaysinger