在vue cli工程中快速引入sass预编译css，核心步骤是安装依赖并配置构建工具。具体做法是运行命令安装`sass`和`sass-loader`，然后在`.vue`文件的`

如何正确安装Sass相关依赖包？

必须安装`sass`作为底层编译器，以及`sass-loader`作为Webpack的加载器。仅安装`sass-loader`会导致编译错误，因为缺少实际的Sass解析引擎。

npm install sass sass-loader -D

安装完成后，无需修改`vue.config.js`中的loader配置，Vue CLI已内置对`sass-loader`的支持。只需确保版本兼容，通常Vue CLI 5.x配合Node.js 16+使用最新版的`sass`和`sass-loader`即可正常工作。

如何在组件中启用Sass语法支持？

在单文件组件的样式块中通过`lang`属性声明语言类型。默认情况下，Vue CLI只识别普通CSS，显式指定`lang="sass"`后，构建工具会调用`sass-loader`将Sass代码转换为CSS。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

<template><div class="container">Hello</div>
</template><script>
export default {
  name: 'App'
}
</script><style lang="sass" scoped>
$primary-color: #333;

.container
  color: $primary-color
  font-size: 16px
</style>

上述代码展示了使用缩进式Sass语法的示例。若需使用SCSS（即带大括号和分号的Sass），可将`lang`改为`lang="scss"`，其余写法保持一致。

当使用缩进式Sass时需要注意什么格式问题？

缩进式Sass（.sass）严格依赖缩进层级来表示嵌套关系，任何空格或Tab混用都会导致解析失败。与SCSS不同，它不支持注释块内的多行注释语法（需用`//`），且选择器与属性之间不能有空格分隔符外的多余字符。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！