Scss 没有加载 Vite

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 也用于构建项目。

package.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版本可能有错误。

唯一对我有用的是 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 包，不需要 loader）

vue: 3.2.29

Answer 2

preprocessorOptions.*.additionalData 参数只有在已经有 loaded/imported css 的情况下才有效，所以基本上使用直接导入到 main.ts 文件的两种选择可以在 vite.config.js 文件中定义批量和任何其他预处理。

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

Scss 没有加载 Vite

Scss not loaded with Vite

vuejs3

storybook

vite