例如,我在 app.scss
中导入了 bootstrap,
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/bootstrap.scss";
如果我这样做,现在在一个组件中,
<style scoped lang="scss">
.text {
@extend .text-white;
}
</style>
我得到以下错误,
[plugin:vite:css] The target selector was not found.
Use "@extend .text-white !optional" to avoid this error.
╷
8 │ @extend .text-white;
│ ^^^^^^^^^^^^^^^^^^^
╵
src/components/Navbar.vue 8:3 root stylesheet
最佳答案
在 vite.config.js
中为 CSS 预处理器添加一个选项:
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "bootstrap/scss/bootstrap";`
}
}
},
有关更多信息,您可以查看官方文档 https://vitejs.dev/config/#css-preprocessoroptions
关于vue.js - 如何在 vue 3 vite 中使用 sass 扩展?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69130068/