Vite 未加载 Scss

Question

使用 Vite 和 Vue 进行的构建就像一个魅力（路径也是正确的）。然而，故事书却没有。

这是我的配置：

vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: { 
         additionalData: `@import "./src/css/global.scss";` 
     },
    },
  },
})

.storybook/main.js：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "storybook-builder-vite"
  }
}

我正在使用 Storybook-builder-vite，因为 vite 也用于构建项目。

包.json

"devDependencies": {
    "@storybook/addon-actions": "^6.4.18",
    "@storybook/addon-essentials": "^6.4.18",
    "@storybook/addon-links": "^6.4.18",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/vue3": "^6.4.18",
    "sass": "^1.49.7",
    "sass-loader": "^12.4.0",
    "storybook-builder-vite": "^0.1.15",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-i18n": "^8.27.0",
    "vue-loader": "^16.8.3",
    "vue-tsc": "^0.29.8"
}

有任何想法吗 ？

Answer 1

我也遇到过同样的问题。虽然很多 vite vue 3 样板的做法和你我一样，但奇怪的是它不起作用，也许是某个 vite 版本可能有 bug。

唯一对我有用的是导入main.ts：

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

//import your scss here
import "@/assets/scss/style.scss";

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

我的版本：

sass：（1.49.8这里只需要sass包而不需要加载器）

视图：3.2.29

Answer 2

该preprocessorOptions.*.additionalData参数仅在已经加载/导入的 css 前置时才起作用，因此基本上使用直接导入到main.ts文件中进行批量导入的选项以及可以在文件中定义的任何其他预处理vite.config.js。

不幸的是， https://vitejs.dev/config/#css-preprocessoroptions上的文档没有解释这一点，这确实玷污了一个完美的周六晚上