Scss not loaded with 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"
}
}

我正在使用故事书构建器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版本可能有错误。

唯一对我有用的是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

Answer 2

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

文件位于https://vitejs.dev/config/#css-不幸的是，预处理并不能解释这一点，这确实玷污了一个完美的周六晚上

Answer 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文档

Answer 4

对于我来说，我需要我的npm模块在@import 'my-npm-module/sass/file'的sass文件中可用，有效的方法是将其添加到vite.config.ts 中

css: {
preprocessorOptions: {
scss: {
includePaths: ['node_modules']
}
}
},

然后在我的scss文件中，我可以使用导入的sass文件

堆栈：CCD_ 8，"lit": "^2.3.1",