Scss 没有加载 Vite答案

【问题标题】：Scss not loaded with ViteScss 没有加载 Vite
【发布时间】：2022-08-05 06:30:34
【问题描述】：

使用 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\"
}

有任何想法吗？

我看到你在这个例子中使用了storybook-builder-vite。请注意，该软件包已重命名为@storybook/builder-vite，因此如果您尚未更新，请在有机会时进行更新。
它已经完成了。在我写这个问题的时候，这个包是正确的。

标签： vuejs3 storybook vite

【解决方案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 包，不需要加载器）

Vue：3.2.29

【讨论】：

同样的问题，同样的方法解决了。 “sass”：“1.53.0”和“vue”：“3.2.25”

【解决方案2】：

preprocessorOptions.*.additionalData 参数只有在已经加载/导入 css 的情况下才有效，因此基本上使用直接导入到 main.ts 文件的两种选项进行批量处理，任何其他预处理都可以在 vite.config.js 文件中定义.

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

【讨论】：

我可能会通过 vite 的文档添加一些此评论：vitejs.dev/guide/features.html#import-inlining-and-rebasing
我也想谈谈我的个人经历。除非您的样式文件以某种方式不是由您的组件或其他样式文件@imported，否则 vite 不会处理它。而@import 关键字、at-rule、指令（无论你的预处理器如何称呼它）是重要的使用方法，例如，我正在使用 SCSS 并尝试使用@use 而不是@import，但它不起作用。我的意思是 vite 不会通过 @use 另一个 SCSS 文件获取我的 SCSS 文件。

【解决方案3】：

这对我有用：

如果还没有，请为 Vite 安装 Storybook 构建器 (@storybook/builder-vite)

npm install @storybook/builder-vite --save-dev

或者

yarn add --dev @storybook/builder-vite

然后在 .storybook/main.js 文件中，

const { mergeConfig } = require('vite');

module.exports = {
  async viteFinal(config, { configType }) {
    // return the customized config
    return mergeConfig(config, {
      css: {
        preprocessorOptions: {
          scss: {
            // Next line will prepend the import in all you scss files as you did with your vite.config.js file
            additionalData: `@import "./src/styles/main";`,
          },
        },
      },
    });
  },
  // ... other options here
};

这与您所做的几乎相同，这里的技巧是通过故事书的 main.js 文件中的 mergeConfig 将相同的 css.preprocessorOptions.scss 对象添加到故事书配置中。

基于@storybook/builder-vite documentation

【讨论】：