如何將SCSS與Vue.js單個文件組件一起使用

了解如何在您的Vue.js組件中啟用SCSS

使用Vue CLI您可以啟用“ CSS預處理器”,還可以選擇啟用哪一個:

Vue CLI

如果您使用的不是基於Vue CLI的項目,或者是使用Vue CLI初始化的項目,但未添加CSS預處理程序支持,則可以在以後使用以下方式添加它:

npm install --save-dev node-sass sass-loader

在您的應用程序組件內部,您可以使用

<style lang="scss">
...
</style>

並在其中添加您的SCSS代碼。

如果要將SCSS代碼保存在外部文件中,則可以這樣做,只需將其導入組件的腳本部分即可:

<script>
import '../public/style.scss'

//… </script>

免費下載我的Vue手冊


更多vue教程: