好资源导航 » 文章资讯 » 在 vue-cli v3.0 中使用 SCSS/SASS的方法

在 vue-cli v3.0 中使用 SCSS/SASS的方法

2023-09-11 12:30:05 59

在项目中使用SCSS/SASS进行样式编写无疑会节省很多开发样式的时间。关于如何在vue-cliv3.0中使用SCSS/SASS，这里提供三种方案。前提是在使用vue-cli生成项目时勾选了CSSPre-processors(CSS预处理器)，否则无法在项目中直接使用。

方案一：在组件中直接使用

在组件中直接使用SCSS/SASS是最简单的方式：

通过lang选项可以选择使用的语法：scss/sass。如果希望样式能够在全局范围内生效，就将scoped删除。

方案二：在组件中导入.scss文件

有时候我们可能想定义一个通用的scss/sass

我们可以在项目目录中创建一个.scss文件，比如一些只想在特定组件中使用的通用样式或是一些scss变量等。

我们可以在组件中使用@import进行样式导入，例如：

@import'../src/static/common.scss';

注意路径不要写错了。而且这种方案的前提是在导入组件中使用了方案一。否则的话.scss不可能直接在普通css样式表中进行编译，需要保持样式表格式的统一。

方案三：使用全局scss/sass文件

如果你希望定义一下全局能够使用的scss样式，首先需要创建一个.scss文件，然后在项目的main.js中使用import命令就像导入模块一样，将独立.scss文件全局导入项目。

import"./static/common.scss";

总结

以上所述是小编给大家介绍的在vue-cliv3.0中使用SCSS/SASS的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！