告别Sass，纯CSS实现@import功能
在前端开发中，Sass等预处理器很常见。但如果项目中仅有一个文件使用Sass，引入Sass及其Loader显得冗余。本文介绍如何用纯CSS替代Sass中的@import，去除Sass依赖。
假...
告别Sass，纯CSS实现@import功能
在前端开发中，Sass等预处理器很常见。但如果项目中仅有一个文件使用Sass，引入Sass及其Loader显得冗余。本文介绍如何用纯CSS替代Sass中的@import，去除Sass依赖。
假设你的.scss文件使用@import导入多个外部CSS文件（例如select2.css、font-awesome.css等），这些外部文件本身就是纯CSS，不依赖Sass。
最直接的解决方案是将@import替换为标签。 将.scss文件转换成.css文件，并在HTML中使用标签引入所有CSS文件。
例如，原始.scss文件：
/* this file is for your main application css. */ @import "select2/dist/css/select2.css"; @import "font-awesome/css/font-awesome.css"; @import "ionicons/dist/css/ionicons.css"; @import "bootstrap/dist/css/bootstrap.css";
可以转换为一个空的或包含自定义样式的main.css文件，然后在HTML中这样引入：
<link href="select2/dist/css/select2.css" rel="stylesheet"> <link href="font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="ionicons/dist/css/ionicons.css" rel="stylesheet"> <link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="main.css" rel="stylesheet">
这样就完全避免了Sass，实现了去依赖。 请根据实际项目调整文件路径。 虽然CSS也支持@import，但标签的加载效率通常更高，推荐使用这种方法。
以上就是如何用纯CSS替代Sass中的@import语句以摆脱Sass依赖？的详细内容，更多请关注知识资源分享宝库其它相关文章！
版权声明
本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com
发表评论