我应该如何在.vue文件中包含css文件？

我使用官方VUE-CLI棚架，并试图包括normalize.css在App.vue这样我应该如何在.vue文件中包含css文件？

<style scoped> 
    @import "/node_modules/normalize.css/normalize.css"; 
    .app { 
    font-family: Helvetica, Arial, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    text-align: center; 
    color: #2c3e50; 
    max-width: 1000px; 
    margin: auto; 
    font-size: 16px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
    } 
</style>

但在编译CSS后不会在风格标签或者作为外部文件包括：

那么，我该如何正确地包含这个或另一个CSS文件？

来源

2017-07-27 sqlnoob

您的样式标记没有lang属性，这意味着当Vue组件被捆绑时，它将输出一个普通的CSS文件：无需预处理。

发生这种情况时，它会移动您的导入语句并将其转换为plain CSS import。

要修复您的代码，您需要将导入URL更改为Web服务器可访问的相对路径。在你的情况下，路径/node_modules未安装在Web服务器上，因此它不会解析文件。这可能更容易（and better practice）将标准化到页面上的不同样式标记（使用HTTP2这不会成为瓶颈），或者使用预处理器并将标准化导入与CSS相同的最终输出。

如果你想使用SASS/SCSS作为一个预处理器（你的语法是有效SCSS的话），那么你要定义像这样的风格：

<style lang="scss" scoped>

的的WebPack vue-loader将支持多国语言，但你还需要添加正确的WebPack装载机预处理器：

npm i --save-dev node-sass sass-loader

在Vue公司的WebPack负载更多信息呃用CSS可以发现here

来源

2017-07-27 18:34:25

我应该如何在.vue文件中包含css文件？

回答

相关问题