如何在SCSS文件中引用src/assets目录下的icon.svg文件？

场景描述 #

我的icon.svg文件存放在src/assets目录下，尝试在SCSS文件中直接引用它作为背景图，写法如下：

select {
    background: url("/src/assets/icon.svg") no-repeat ...;
}

但该写法无法生效，报错信息如下：

ERROR in ./src/components/atoms/Common/Dropdown/styles.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./src/components/atoms/Common/Dropdown/styles.module.scss) 5:36-104

尝试过的无效写法 #

• background: url("data:image/svg+xml;, /src/assets/icon.svg")
• background: url(data:image/svg+xml;, ${/src/assets/icon.svg})
• background: url("data:image/svg+xml;" + "/src/assets/icon.svg")

临时冗余解决方法 #

最终通过直接写入转义后的SVG代码解决了问题，但代码过于冗长：

background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.258' height='10.164' viewBox='0 0 18.258 10.164'%3E%3Cg id='dropdown_icon' transform='translate(1.06 1.061)'%3E%3Cpath id='dropdown_icon-2' data-name='dropdown_icon' d='M-.09.18,8.264,8.371-.09,16.316' transform='translate(16.316 0.09) rotate(90)' fill='none' stroke='%23333d4b' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' /%3E%3C/g%3E%3C/svg%3E")

核心需求 #

希望通过直接引用文件路径的方式实现简洁代码，请问该如何操作？

可行解决办法 #

1. 使用正确的相对路径 #

根据SCSS文件的位置，计算到SVG文件的相对路径。你的SCSS文件路径是src/components/atoms/Common/Dropdown/styles.module.scss，相对路径应为：

select {
    background: url("../../../../../assets/icon.svg") no-repeat ...;
}

路径逻辑：从Dropdown目录向上回溯4层（Common→atoms→components→src），再进入assets目录找到icon.svg。

2. 配置webpack别名（推荐） #

如果项目基于webpack构建，可给src/assets设置别名，避免冗长的相对路径：

• 在webpack.config.js中添加别名配置：

const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, 'src/assets')
    }
  }
};

• 在SCSS中通过别名引用：

select {
    background: url("~@assets/icon.svg") no-repeat ...;
}

注意别名前需加~，用于告知webpack这是一个模块别名。

3. 确认SVG文件的loader配置 #

确保webpack中配置了处理SVG的loader（如file-loader或url-loader）：

module.exports = {
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.svg$/,
        use: ['file-loader']
      }
    ]
  }
};

若使用url-loader，可设置小体积SVG自动转为base64：

{
  test: /\.svg$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192, // 小于8KB的SVG转为base64
        name: '[name].[hash:8].[ext]',
        outputPath: 'assets/icons'
      }
    }
  ]
}

内容的提问来源于stack exchange，提问作者KNamuuu