我應該如何在.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文件？

回答

相關問題