如何在vuejs3/vite中使用sass

Question

我从vite / vuejs 3开始

在使用npm install -D sass安装sass之后，我尝试将我的_variables.js文件添加到vite.config.js

css: {preprocessorOptions: {scss: {additionalData: `@import" ./src/css/_variables.scss ";`,},},},

不能工作！

它在vue.config中也有效

css: {
     loaderOptions: {
       sass: {
         sassOptions: {
            prependData: `@import" @ / css / _variables.scss ";`,
         }
       }
     }
   },

之后，尝试导入main.js导入文件“./css/_varables.scss”

不幸的是，我的组件找不到变量，错误在哪里

Answer 1

这是我的工作设置，通过命令yarn add -D sass从vite docs获得

// package.json
{
  "dependencies": {
   ...
    "vue": "^3.0.5"
  },
  "devDependencies": {
    ...
    "sass": "^1.32.11",
    "vite": "^2.2.3"
  }
}

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

export default defineConfig({
  plugins: [vue()]
})

// App.vue
<template>...</template>
<script>...</script>

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

// style.scss
[data-theme="dark"] {
  --bg-color1: #121416;
  --font-color: #f4f4f4;
}
[data-theme="light"] {
  --bg-color1: #f4f4f4;
  --font-color: #121416;
}
...
body {
  background-color: var(--bg-color1);
  color: var(--font-color);
}

而且我的vue.config.js是干净的--没有什么花哨的。