如何將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教程：