vue 单文件组件加载样式失败 [英] vue single file component fails to load styles
问题描述
在
https://Codesandbox.io/s/compassionate-gagarin-qxp98?file=/src/components/GenericItem.vue:1921-1957
我正在尝试显示需要样式的模式.使用
I'm trying to display a modal that needs styling. Using
<style scoped>
@import "../styles/modal-style.css";
</style>
不加载适当的样式,也不粘贴
does not load the appropriate styles, nor does pasting the contents of
https://codesandbox.io/s/compassionate-gagarin-qxp98?file=/src/styles/modal-style.css:0-1064
进入style
标签.
这个想法是为了得到类似的东西
The idea is to get something like
https://codesandbox.io/s/sleepy-tdd-jrrgg?file=/index.html:122-181
但模态是单个文件组件.
but the modal is a single file component.
为什么 vue 不加载样式?
Why doesn't vue load styles?
推荐答案
在这种情况下,您应该在 webpack 配置文件中创建别名,如下所示:
You should create alias in such cases inside your webpack config file like so:
... your webpack config ...
configureWebpack: {
resolve: {
alias: {
'~styles': path.resolve(_dirname, 'path/to/your/styles.css')
}
}
}
您的别名现在将是全局的,因此您可以这样做:
Your alias will be global now so you will be able to do so:
<style scoped>
@import '~styles';
</styles>
这篇关于vue 单文件组件加载样式失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!