了解如何在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部分中:

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

//...
</script>