HTML文件如何静态引入scss文件

理论上html是不能引入scss文件的，只能引入css文件，所以在使用scss    时，可以动态监听scss，更改后翻译为css文件，将css文件静态引入html中。

具体方法如下：（比较原始，不依赖于ide工具）

安装sass工具，可以局部安装，也可以全局安装；方法是打开cmd命令行工具，在有npm（或者其他工具，如yarn）的前提下，npm install sass -g (全局安装带 -g,局部不用）；
在scss文件保存目录中，使用命令 sass – watch test.scss : test.css （test为临时文件名，个人可按实际情况更改）;
将css文件引入html中；

按照上面的步骤操作后，即可在写样式表的时候，使用scss文件进行开发，cmd会自动生成css样式文件，从而即时查看效果。

HTML文件如何静态引入scss文件相关推荐

Vue cli3 中全局引入scss文件
写在前面近期把之前写的一个Vue老项目进行了一番重构,发现其中有许多重复使用的css样式代码,决定把重复使用的样式代码提取到公共的scss文件中,并全局使用,本来以为是一个比较简单的工作,但是在操作 ...
webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
vue引入外部文件_vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 2 在.vue页面使用,先声明后使用 declare ...
前端面试之---link 引入css文件和@import引入css文件的区别
css引入方式link与import的区别 1.link属于html标签,而@import是css提供的,只能加载CSS 2.加载顺序,link在页面加载时被加载,@import在页面加载完之后再加载 ...
关于webpack编译scss文件
css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...
使用EasyUI的插件前需要引入的文件
一.使用EasyUI的插件需要引入一些文件 1.引入相关文件 easyui.css: easyUi的样式文件 icon.css:easyUI的图标样式文件 easyui.min.js:easyUi的类 ...
Uniapp引入json文件和引入Js文件
1.引入JSON 文件使用require // 引入json文件 let dnf = require('@/data/person.json') json文件 {"code": ...
两个页面的公共的文件怎么只引入一次_vuecli 多页面之公共入口
前言网上vuecli多页面配置教程大多讲的是如何配置多页面,少有见到介绍多页面的优化方案.以下总结几点缺陷:1.如何公共引入?公共入口怎么设置?2.路由跳转和传参怎么方便?3.每个页面都要手动创建? ...
php 引入类_PHP 如何引入同一文件下多个class类
同一文件下多个类,直接new第一个类有效,其他类无效.其实是new其他类,不执行自动载入,解决方式是, 1.手动载入,require引入这个类文件 2.new这个文件的第一个类或同文件名的类,让其自动 ...
webstorm和intellij idea下如何自动编译sass和scss文件
前言学过css的人都知道,css他不是一个编程语言.虽然你可以用css去写网页样式,但是你却没法使用它进行编程.所以有一句话来描述css我个人觉得再合适不过了,"CSS基本上是设计师的工具 ...

HTML文件如何静态引入scss文件

HTML文件如何静态引入scss文件相关推荐

最新文章

热门文章