未加载Vite的Scss
使用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";`
},
},
},
}).故事书/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是用来构建这个项目的。
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"
}有什么想法吗？
回答 3
Stack Overflow用户
发布于 2022-02-19 21:45:52
我也遇到过同样的问题。虽然许多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包，而不需要加载程序)
vue：3.2.29
Stack Overflow用户
发布于 2022-05-01 00:18:04
只有在前面已经加载/导入了css的情况下，preprocessorOptions.*.additionalData参数才能工作，因此基本上可以使用直接导入大容量main.ts文件的两个选项，也可以在vite.config.js文件中定义任何其他预处理。
不幸的是，https://vitejs.dev/config/#css-preprocessoroptions的文档并没有解释这一点，这确实玷污了一个完美的星期六晚上。
Stack Overflow用户
发布于 2022-08-04 22:30:34
以下是对我起作用的东西：
如果没有，请为Vite安装Storybook构建器(@storybook/ builder )
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
};这里的诀窍是通过故事书中的css.preprocessorOptions.scss文件中的mergeConfig将相同的main.js对象添加到故事书配置中。
https://stackoverflow.com/questions/71064299
复制相似问题
腾讯云开发者
