如何在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 import "./css/_variables.scss" 中导入文件

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

Answer 1

Vite 有点不同

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "./src/styles/_animations.scss";
          @import "./src/styles/_variables.scss";
          @import "./src/styles/_mixins.scss";
          @import "./src/styles/_helpers.scss";
        `
      }
    }
  }
})

Answer 2

这是我的工作设置，从 vite 文档 和命令

yarn add -D sass

获取

// 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

很干净——没什么特别的。

Answer 3

对于Vue3，如文档中所述：https://vitejs.dev/guide/features.html#css-pre-processors

您只需添加

npm add -D sass

并在脚本标签中使用

<style lang="scss">
// OR
<style lang="sass">

Answer 4

我的问题如下：我无法在

<style lang="scss">

中获取 scss 变量，现在这是我的良好配置：

// vite.config.ts

export default defineConfig({
  plugins: [
    vue(),
    ...
  ],
  ...,
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: ` // just variables loaded globally
          @import "./src/assets/styles/setup/fonts";
          @import "./src/assets/styles/setup/colors";
          @import "./src/assets/styles/setup/mixins";
        `
      }
    }
  }
});

// App.vue

<style lang="scss"> // the main file that imports everything related with styles
@import "@/assets/styles/main.scss";
</style>

Answer 5

我遇到了同样的问题，只是通过将 sass 安装为开发依赖项来解决它。

npm i -D sass

Answer 6

解决方案：

1. “npm add -D sass” ----------（-g flag 现在将无法在 2022 年 2 月 16 日使用）。 或者，

2. “yarn add -D sass” - 在命令行中运行这些注释。

3. 在main.js文件中“import'./style.scss'”将不起作用，所以我在html中添加了我的sass文件

Answer 7

如果已经在您的react.js应用程序中安装了sass。卸载它。 卸载完成后，检查您的 packge.json 文件。看起来会是这样的。

"devDependencies": {
"@types/react": "^18.0.17",
"@types/react-dom": "^18.0.6",
"@vitejs/plugin-react": "^2.1.0",
"vite": "^3.1.0"   }

然后Ren这个命令

npm cache clean --force or npm cache clean -f

关闭您的 Vscode 并重新打开它。 现在在您的 React vite 应用程序中重新安装 sass。

# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

安装完成后，你的 json 文件看起来就像这样。

  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.1.0",
    "sass": "^1.55.0",
    "vite": "^3.1.0"
  }