灏天阁

vue3.2/Vite/Ts13: 集成 Sass

· Yin灏

目前我们组件内部已经可以使用 scss 样式了，因为在配置 styleLint 工具的时候，项目当中已经安装过 sass 和 sass-loader，因此我们组件内可以使用 scss 语法，需要加上 lang=‘scss’

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

接下来我们为项目添加一些全局样式

清除默认样式

在 src / styles 目录下创建一个 index.scss 文件，当然项目中需要用到清楚默认样式，因此在 index.scss 引入 reset.scss

@import "./reset.scss";

在 main.ts 中引入全局样式

//...
import "@/styles/index.scss";
//...

定义全局 scss 变量

  • 新建 src / styles / variable.scss
// variable.scss
$base-color: red;
  • 在 vite.config.ts 文件配置：
//...
export default defineConfig({
  //...
  css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss"',
      },
    },
  },
});
//...

- Book Lists -