javascript - vue单文件组件加载样式失败
问题描述
在
https://codesandbox.io/s/compassionate-gagarin-qxp98?file=/src/components/GenericItem.vue:1921-1957
我正在尝试显示需要样式的模态。使用
<style scoped>
@import "../styles/modal-style.css";
</style>
不加载适当的样式,也不粘贴
https://codesandbox.io/s/compassionate-gagarin-qxp98?file=/src/styles/modal-style.css:0-1064
进入style
标签。
这个想法是得到类似的东西
https://codesandbox.io/s/sleepy-tdd-jrrgg?file=/index.html:122-181
但模态是单个文件组件。
为什么 vue 不加载样式?
解决方案
在这种情况下,您应该在 webpack 配置文件中创建别名,如下所示:
... your webpack config ...
configureWebpack: {
resolve: {
alias: {
'~styles': path.resolve(_dirname, 'path/to/your/styles.css')
}
}
}
您的别名现在将是全局的,因此您可以这样做:
<style scoped>
@import '~styles';
</styles>
推荐阅读
- python - 无法从源代码为旧 GPU 卡安装 Pytorch
- algorithm - 线性时间内不同值的最大子数组的算法
- python - 如何检查用户输入是否对披萨列表/元组有效?
- c# - 在 selenium C# 中的 iframe 中移动鼠标光标不起作用
- sqlite - 如何将数据库从 SQL Server Express 移植到 sqlLite
- c# - C# Moq 拦截方法调用
- javascript - React.js 在 socket.on 上添加一个类
- opencl - OpenCL - 图像的保存区域
- windows - 在 Windows 上安装 mxnet 时出现无法满足的错误。我正在使用 ANACONDA 5.1.0 版本和 Python 3.5.3 版本
- mysql - mysql:无法识别的语句类型。(靠近WITH)