Webpack Encore中使用Dart Sass时如何禁用url()路径解析

可以直接通过给enableSassLoader()传参实现需求，不需要改动现有SCSS代码里的路径写法。

Dart Sass搭配sass-loader使用时，默认会尝试解析url()中引用的资源路径，和之前node-sass的默认行为不一致，你只需要在Webpack Encore配置中关闭sass-loader的url解析功能即可：

• 打开项目根目录的webpack.config.js配置文件
• 修改原来无参数调用的enableSassLoader()方法，传入配置回调关闭url解析：

Encore
  // ... 保留其他原有配置项
  .enableSassLoader((sassLoaderOptions) => {
    // 关闭url()路径自动解析，保留书写的路径原样输出
    sassLoaderOptions.url = false;
  })
;

• 保存配置后重新执行构建命令即可生效。

配置生效后，SCSS中写的url('/path/inside/public-folder/img.png')这类指向public目录的绝对路径会原样输出到编译后的CSS文件中，不会再触发资源路径找不到的报错，和之前使用node-sass时的表现完全一致。

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