[vite] Internal server error: Undefined mixin / Undefined variable. Vite+Vue3+TS+SCSS 全局样式引入出错解决方案
在使用Vue3 + Vite2开发过程中,使用了SCSS以往在main.js使用引入全局样式表就可以了@import './styles/mixins.scss';但是实操中得到了这样的一个错误[vite] Internal server error: Undefined mixin.4 │@include flex-row-lc;翻阅文档: https://vitejs.bootcss.com/
·
在使用Vue3 + Vite2开发过程中,使用了SCSS
以往在main.js使用引入全局样式表就可以了
@import './styles/mixins.scss';
但是实操中得到了这样的一个错误
[vite] Internal server error: Undefined mixin.
4 │ @include flex-row-lc;
翻阅文档: https://vitejs.bootcss.com/config/#css-preprocessoroptions
得知需要通过配置vite指定传递给 CSS 预处理器的选项来引入全局mixin样式
vite.config.js :
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: "@import 'src/styles/index.scss';"
}
}
}
})
这样配置就可以了
但是这里引申出一个问题:比如引入其他外部的样式表该如何处理?
比如还需要引入element的theme该如何处理?
在main.js /.ts 里面照常引入:
// element
import "./styles/theme/index.css";
更多推荐
已为社区贡献1条内容
所有评论(0)