In SASS, I have a CSS rule with a URL that looks like:

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

By default, Webpack will resolve this (though it chokes on my SVG). I want it to NOT resolve. I want the browser to load this image separately, from my static directory.

I'm not sure what to say about what I've tried so far. I've tried a lot of settings from around the web in my Webpack config that didn't work...

Here's my Webpack config, which I think is pretty out-of-the-box:

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"],
      },
    ],
  },
};

I'm sure my issue is because I don't have intimate knowledge of Webpack, but the documentation I don't think is particularly intuitive at a glance.

In SASS, I have a CSS rule with a URL that looks like:

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

By default, Webpack will resolve this (though it chokes on my SVG). I want it to NOT resolve. I want the browser to load this image separately, from my static directory.

I'm not sure what to say about what I've tried so far. I've tried a lot of settings from around the web in my Webpack config that didn't work...

Here's my Webpack config, which I think is pretty out-of-the-box:

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"],
      },
    ],
  },
};

I'm sure my issue is because I don't have intimate knowledge of Webpack, but the documentation I don't think is particularly intuitive at a glance.

• javascript
• css
• webpack
• sass

Share Improve this question Follow edited Jul 25, 2021 at 22:55 BBaysinger asked Jul 16, 2021 at 3:50 BBaysingerBBaysinger 6,8771414 gold badges7777 silver badges146146 bronze badges 5

• Are you using css-loader and if so try removing it. webpack.js/loaders/css-loader – sol Commented Jul 18, 2021 at 22:35
• Yes, I think my config is close to default setup... Is that to say this is the way one would go about disabling the feature? Foregoing css-loader altogether? – BBaysinger Commented Jul 18, 2021 at 22:46
• 2 Why would you use webpack for CSS at all? The only time you need that is if you're using styled ponents (e.g. JS code that imports a css file, which is... questionable, in a lot of cases). For normal page CSS, you don't need webpack in the slightest, just pile your sass to css in your asset dir, and load it normally with a <link> element in your HTML template. – Mike 'Pomax' Kamermans Commented Jul 18, 2021 at 23:12
• So "ah-ha" moment that I could turn off css-loader and implement the content in .css files, but that seems like a workaround to me... For future, I should ask if there is a setting that will acmodate doing this in my SASS/SCSS. Is that possible? – BBaysinger Commented Jul 18, 2021 at 23:19
• ...For organization if nothing else. Should I really need to create a separate file for a single CSS rule to live separately from related styling? I can accept that probably, but would like to know if that's the only way. – BBaysinger Commented Jul 18, 2021 at 23:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10 +50

UPDATE (thanks to the user in the ments):

There is a new option now, you can exclude specific url from Webpack resolving with a /* webpackIgnore: true */ ment:

.class {
  /* webpackIgnore: true */
  background: url("./url/img.png");
}

More in the docs

---

I think Webpack 5 css-loader resolves this url() calls by default, and you need to disable it manually:

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

More in the docs

Maybe there are same options for your other loaders, but I'm pretty sure you just need to disable it for css-loader only.