第三章 | Vue 中引入 SCSS

在 Vue 中引入 SCSS，需要安装 sass-embedded，然后在 vue.config.js 中配置 scss。

配置 SCSS

首先，安装 sass-embedded：

1	npm install sass-embedded -D

然后，在 vue.config.js 中配置 scss：

{
  // ……（省略）
  "devDependencies": {
    // ……（省略）
    // 添加sass-embedded
    "sass-embedded": "^1.85.0",     // 添加sass-embedded
    // ……（省略）
  }
}

从外部引入 SCSS

我们要在 assets 文件夹下新建一个 style.scss 文件，然后在 main.ts 中引入，最终，文件如下：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由
import './assets/styles.scss'; // 引入全局SCSS文件

createApp(App).use(router).mount('#app'); // 使用路由

在 Vue 组件中引入 SCSS

在 Vue 组件中引入 SCSS，只需要在 <style> 标签中添加 lang="scss" 即可，如下：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script lang="ts">
export default {
    name: 'BlankPage',
};
</script>


<style lang="scss">
/* 添加样式 */
</style>

如果，我们不想要 SCSS 影响到全局，可以添加 scoped 属性，如下：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script lang="ts">
export default {
    name: 'BlankPage',
};
</script>


<style lang="scss" scoped>
/* 添加样式 */
</style>