vite中 全局引入scss的坑

依赖

// 只要sass即可
npm i sass -D

配置

// vite.config.ts
export default defineConfig({
   ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/global.scss";`
      }
    }
  }
})

global.scss文件

// 部分工具函数和mixin
@import url(./tools/function/_decimal.scss);
@import url(./tools/mixin/_BEM.scss);
...

• 以上方式引入可能出现类似 unKown Word 或 Undefined mixin的错误，如下
  

•  对global.scss文件做如下修改:
  

// 如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线和后缀。
@import ./tools/function/decimal;
@import ./tools/mixin/BEM.scss;

原因

• 共同点 都是从其他样式表导入样式规则到当前样式表中
• 不同点 @import url 是css的语法规则
  

@import “” 是scss加强过的特有规则

• Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。