vue单文件组件加载样式失败

Posted 2023-02-16

【中文标题】vue单文件组件加载样式失败

【英文标题】：vue single file component fails to load styles

【发布时间】：2021-09-19 05:44:51

【问题描述】：

在

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 不加载样式？

【问题讨论】：

它的加载很好，只是例如你的目标.modal-header h3 但默认插槽没有h3，所以它不是绿色

尝试将模态添加添加到h3 样式确实发生了变化，但没有达到预期。

【参考方案1】：

在这种情况下，您应该在 webpack 配置文件中创建别名，如下所示：

... your webpack config ...

configureWebpack:   
 resolve:   
   alias:   
     '~styles': path.resolve(_dirname, 'path/to/your/styles.css')
   
 

您的别名现在将是全局的，因此您可以这样做：

<style scoped>
    @import '~styles';
</styles>

【讨论】：

显然它与加载器无关（问题中的示例没有明确的 webpack 配置

vue.config.js 未加载 codesandbox.io/s/dazzling-jepsen-r7283?file=/…