SCSS：如何在HTML页面引入SCSS？

MangoRu 字数: 3314 阅读耗时: 8 分钟 2023/07/21 博客独享热度: 35 评论:

SCSS：如何在HTML页面引入SCSS？

CSS(Sass) / WebStorm

默认情况下，HTML页面只能够引入CSS文件，如果需要引入SCSS文件，则需要安装Sass工具来动态监听SCSS文件更改，更改后SCSS文件会被自动编译生成CSS文件，再将生成的CSS文件引入HTML页面即可。

1. 创建指定目录

示例：在html同名文件夹下创建 css、scss两个目录，css文件夹为空，scss文件夹下存放自己写的scss文件。

安装SASS扩展： npm install sass -g

npm install sass -g

监听文件夹：sass --watch scss:css （可以边监听边书写样式，浏览器查看生效结果）

也可以监听单个文件：sass --watch a.scss:a.css

sass --watch scss:css

注意：需确保路径为html文件所在路径哦~

稍等片刻会在css文件夹下生成对应的css文件。

如果不想总是单独监听文件或文件夹，可以在WebStorm Settings设置下全局配置File Watcher（配置后当你修改SCSS文件内容时会自动生成对应的CSS文件）：

html文件内的head标签内引入，如下示例：

<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/css-examples.css">