sass-loader 无法解析 alias里设定的 “@/styles” 路径资源

[ranlix]

相关平台

微信小程序

复现仓库

https://gitee.com/liran319/taro-scss-import-error
小程序基础库: 2.15.0
使用框架: Vue 2

复现步骤

1. 在 config/index 里添加了 alias:

alias: {
    '@/styles': resolve('src/styles'),
  },

2. 在 src/styles 目录下添加一个 “vars.scss”;
3. 在 /pages/index.vue 里的 style 标签里通过 import引入：

<style lang="scss">
@import "@/styles/vars.scss";
</style>

4. 允许编译：npm run dev:weapp

期望结果

正常编译成功；

实际结果

/src/pages/index/index.vue?vue&type=style&index=0&lang=scss& (./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/css-loader/dist/cjs.js??ref--1-oneOf-0-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??ref--1-oneOf-0-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/dist/cjs.js??ref--1-oneOf-0-4!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/index/index.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
22 │ @import '@/styles/vars.scss';
│ ^^^^^^^^^^^^^^^^^^^^
╵
src/pages/index/index.vue 22:9 root stylesheet
at ...

环境信息

 Taro v3.3.1


  Taro CLI 3.3.1 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
      Yarn: 1.12.1 - /usr/local/bin/yarn
      npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
    npmPackages:
      @tarojs/components: 3.3.1 => 3.3.1
      @tarojs/mini-runner: 3.3.1 => 3.3.1
      @tarojs/runtime: 3.3.1 => 3.3.1
      @tarojs/taro: 3.3.1 => 3.3.1
      @tarojs/webpack-runner: 3.3.1 => 3.3.1
      babel-preset-taro: 3.3.1 => 3.3.1
      eslint-config-taro: 3.3.1 => 3.3.1

---

补充信息

Taro v3.0.28 是OK的, 升级到 3.1 之后，尝试使用 Taro.getUserProfile， 结果编译

[ranlix]

貌似不是alias本身的问题，测试了下，在mini 下添加过的一段配置，在升级之后有问题

webpackChain(chain, webpack) {
      /* 加一条 scss loader, 支持 vuejs 中 <style lang="scss" module> 这种形式的 css modules */
      const ruleStore = chain.module.rule('scss').oneOfs.store
      const oneOf0 = ruleStore.get('0')  // import 'xxx.module.scss' 方式的 css modules 配置, 下面的 postcss.cssModules.enable 开启后会自动生成
      const oneOf1 = ruleStore.get('1')  // 其他 scss 文件, 常规的 scss loader
      ruleStore.set('2', oneOf1)
      // 删掉确保下面的 chain.module.rule('scss').oneOf('1') 会创建一个新的对象, 避免 resourceQuery 操作影响了一个共用的 store
      ruleStore.delete('1')
      const usesStore = oneOf0.uses.store
      const uses = _.map(['0', '1', '2', '3'], key => {
        const store = usesStore.get(key).store
        return {
          loader: store.get('loader'),
          options: _.cloneDeep(store.get('options'))
        }
      })
      chain.module.rule('scss').oneOf('1').resourceQuery(/module/)
        .use(0).loader(uses[0]['loader']).options(uses[0]['options']).end()
        .use(1).loader(uses[1]['loader']).options(uses[1]['options']).end()
        .use(2).loader(uses[2]['loader']).options(uses[2]['options']).end()
        .use(3).loader(uses[3]['loader']).options(uses[3]['options']).end()
    },

[Chen-jj]

@liran319 的确是修改 webpack 配置后才报错。

我按这段代码的功能，直接修改 @tarojs/mini-runner 的代码，是可以编译成功的：

if (cssModuleOptions.enable) {
    //...
    // 插入了此 loader
    cssLoaders.unshift({
      resourceQuery: /module/,
      use: [
        extractCssLoader,
        cssLoaderWithModule,
        postcssLoader
      ]
    })
    // ...
  }

可以检查一下 webpackChain 的写法，印象中 3.0.28 - 3.3 可能改过 post-css、sass-loader 的版本，但感觉也不应该有影响。

另外，对于 Vue <style lang="scss" module> 的支持，欢迎给我们提个 PR 哈～

[ranlix]

@Chen-jj 感谢～