Vue+Vite+Tailwind项目中声明SCSS变量后样式失效求助

问题出在你直接在index.html里引入.scss文件的方式——浏览器本身不认识SCSS语法，Vite也不会自动处理这种直接在HTML里引入的SCSS文件，当文件里出现未编译的SCSS变量时，整个样式文件会解析失败，连带之前的.test样式也失效了。

解决步骤很简单：

• 把SCSS文件的引入移回main.js
  删掉index.html里对main.scss的引入，恢复main.js里的样式导入，改成：

  import './main.scss'
  

  这样Vite会自动识别.scss后缀，调用已安装的sass依赖完成编译，把SCSS转成浏览器能识别的CSS。

• 验证SCSS文件内容
  你的main.scss可以正常保留变量，比如：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  // SCSS变量，用不用都不影响编译
  $theVar: rgb(28, 95, 196);
  
  .test {
    background-color: red;
    // 要是想用变量也可以直接用，比如 color: $theVar;
  }
  

如果之后需要全局SCSS变量（比如多个组件共用的变量），可以在vite.config.js里配置预处理器选项，比如：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 自动在每个SCSS文件开头导入全局变量文件
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
})

这样处理后，SCSS变量可以正常使用，.test的红色背景也会正常生效。

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