scss全局变量在 vite 导入时报错：Can't find stylesheet to import

分类：HBuilderX

scss sass HBuilderX vite

如附件所示。变量没有写在 uni.scss，想写在自己定义的文件里。

HBuilderX 版本 3.8.4
包管理器：yarn 1.22.19
'@import "./styles/variables.scss";'这个路径是没有问题的，一开始没有加 sass 包，以为因为这个导致不支持 @import，但是加了之后还是报错；

在 cli 模式下，导入变量文件和编译使用是没问题，故怀疑是 HBuilderX 一些特殊设置/配置有关？

import uni from '@dcloudio/vite-plugin-uni'  
import { resolve } from 'path'  
import { defineConfig } from 'vite'  

// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [uni()],  
  resolve: {  
    alias: {  
      '@': resolve(__dirname, './src'),  
      '@utils': resolve(__dirname, './src/utils')  
    }  
  },  
  css: {  
    preprocessorOptions: {  
      scss: {  
        additionalData: '@import "./src/styles/variables.scss";',  
        javascriptEnabled: true  
      }  
    }  
  }  
})

2023-06-08 09:41 负责人:DCloud_UNI_LXH 分享

4 个回复

1***@qq.com (作者)

刚刚卸载了 hbuilderX 的 dart-sass 编译插件，想用package.json 里的 sass 包，发现运行编译的时候就会提示使用了 sass 语言，但是没有 dart-sass 编译器，就自动下载安装回来了。。。
估计是 hbuilderX 默认使用自己的 vite 和 sass编译器，更加怀疑是 hbuilderX 的问题了(狗头)

1***@qq.com (作者)

已解决，路径使用别名竟然可以了。。。cli 方式是可以使用相对路径的，会不会是 hbuilder 的 bug?

import { defineConfig } from 'vite'  
import uni from '@dcloudio/vite-plugin-uni'  
import { resolve } from 'path'  

// https://vitejs.dev/config/  
export default defineConfig({  
  plugins: [uni()],  
  resolve: {  
    alias: {  
      '@': resolve(__dirname, './'),  
      '@utils': resolve(__dirname, './utils')  
    }  
  },  
  css: {  
    preprocessorOptions: {  
      scss: {  
        // HBuilderX 这里不能使用相对路径，否则报错；cli 方式则无碍  
        additionalData: '@import "@/styles/variables.scss";',  
        javascriptEnabled: true  
      }  
    }  
  }  
})