时间戳

首页 > 解决方案 > 如何使用带有 webpack、sass-loader 和 dart sass 的波浪号前缀导入 sass

webpack - 如何使用带有 webpack、sass-loader 和 dart sass 的波浪号前缀导入 sass

问题描述

这是我的仓库 https://github.com/inspiraller/eg-webpack4-dartsass-import

我可以删除波浪号，它会起作用，但是我正在转换一个包含大量现有~node_modules的大型 repo， 所以只想更新 webpack 以支持现有的波浪号来引用根。

快速参考 - 这些是我已经尝试过但不起作用的 webpack sass-loader 规则：

          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment,
              // https://www.npmjs.com/package/sass-loader
              // Prefer `dart-sass`
              implementation: sass,
              sassOptions: {
                fiber: false, // not compatibile with node 16+
              },
              sassOptions: (loaderContext) => {
                console.log('loaderCointext = ', loaderContext) // not even printing any output (suspect because error is breaking)
              },
              includePaths: ["~"], // tried this doesn't work
              webpackImporter: true // just in case - tilde won't work ? - https://webpack.js.org/loaders/sass-loader/ webpackImporter
            }
          }

标签： webpacksasssass-loader

解决方案

好的，我想我已经用这个解决方案修复了错误：

module.exports = {
  resolve: {
    // need * for scss...
    extensions: ['*', '.jsx', '.js'],
    alias: { // fix broken sass
      '~node_modules': path.resolve(__dirname, 'node_modules')
    }
  }
  //, other stuff ...
}

但我不确定是否应用了 css，因为它没有在 sassOptions 回调方法中被拾取：

sassOptions: loaderContext => {
                const {resourcePath} = loaderContext
                if (resourcePath.indexOf('node_modules') !== -1) {
                  console.log({resourcePath})
                }

推荐阅读