sass在vite中的使用

1
npm i sass -d
1
npm install sass-loader sass

查看package.json

1
2
3
4
5
6
"devDependencies": {
    .........
   "sass": "^1.54.8",
   "sass-loader": "^13.0.2",
    .........
 }

显示如图则为安装完成

创建src/styles/main.scss文件

配置 vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 两种方式都可以
        additionalData: '@import "./src/styles/main.scss";'
        // additionalData: '@use "@/assets/scss/global.scss" as *;'
      }
    }
  },
})

安装完成后可以自行测试

需要注意的是~

在需要使用的vue组件处，style lang需写成scss ，而不是sass 否则会报错

1
2
3
<style scoped lang='scss'>
    
</style>