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

Question

在

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

Answer 1

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

... your webpack config ...

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

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

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