/

如何在Vue.js的單文件組件中使用SCSS

如何在Vue.js的單文件組件中使用SCSS

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

使用Vue CLI，您可以啟用“CSS預處理器”，並且可以選擇要啟用的預處理器：

Vue CLI

如果您使用的是非基於Vue CLI的項目，或者是使用Vue CLI初始化但沒有添加CSS預處理器支持的項目，則可以後期添加支持：

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

在應用程序組件中，您可以使用：

1
2
3
<style lang="scss">
…
</style>

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

如果您想將SCSS代碼保留在外部文件中，只需將其導入到組件的script部分中：

1
2
3
4
5
<script>
import '../public/style.scss'

//...
</script>

tags: [“SCSS”, “Vue.js”, “单文件组件”]