1. 首先,您需要打开微信,然后点击右上角的“设置”图标,进入设置页面。
2. 然后,您需要点击“开发者工具”,进入开发者工具页面。
3. 接着,您需要点击“刷新”按钮,这样就可以刷新CSS样式了。
4. 最后,您可以点击“保存”按钮,保存刷新后的CSS样式。
希望以上回答能够帮助您解决问题,谢谢您的提问!
(文章来源于:玉溪无痛人流因为各种浏览器的算法不一样,从而导致CSS在不同的浏览器中存在一部分不一样的效果,CSS重置就是写一段初始化CSS将这些浏览器不同的初始化设置指定同一种显示效果。使用了CSS重置以后,各不同浏览器的初始化设置将一致,后面再写CSS的时候就不会因为浏览器的初始化不同从而导致显示的效果不一致了。CSS重置使用的误区下面这段代码是网上很多网站CSS开始之前使用的CSS重置代码,看着就让人头晕,可能连网站设计者自己都搞不懂里面很多标签的含义。html, body, div, span, applet, object, iframe, h1, h2, h3, h4,h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,code, del, dfn, em, img,ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,dd, ol, ul, li, fieldset, form, label, legend, table,caption,tbody, tfoot, thead, tr, th, td, article,aside, canvas, details, embed, figure, figcaption, footer, header,hgroup, menu, nav, output, ruby,section,summary,time, mark, audio, video {margin: 0padding: 0border: 0font-size: 100%font: inheritvertical-align: baseline}我们写CSS重置要考虑到自己的网站的具体设计,如上面那段CSS代码所示,你的网站可能只有用到里面的其中一小部分标签,但是你却把所有的全部复制到你的CSS里面,你考虑过CSS渲染的问题吗?对你没用的东西你为什么要写进去呢?写程序是一件很严谨的事情,你写的每一段代码你至少需要知道其含义是什么,原样复制连自己都弄不清楚是什么意思有想到会造成什么后果吗?webpack打包的时候只认识 .js 文件,但我们开发中肯定不仅仅只是js文件,如 .html 、 .css 、 .jpg 等,webpack提供了很多 loader 来打包不同类型的文件。
对于加载css文件来说,我们需要一个可以读取css文件的loader,这个loader最常用的是 css-loader 。
webpack.config.js
css-loader 只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中,如果我们希望再完成插入style的操作,那么我们还需要另外一个loader,就是 style-loader 。
* 注意: 因为loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以我们需要将styleloader写到css-loader的前面。
其实 style-loader 做的事情很简单,就是在动态创建了一个 style 标签,把 css-loader 处理的css内容放到style标签内,然后在插入到页面的 head 标签内。
安装less工具将less文件转为css文件。
使用 less-loader ,来自动使用less工具转换less到css
安装
使用
在 这里 可以查询浏览器的占有率。
Browserslist 是一个在不同的前端工具之间,共享目标浏览器和Node.js版本的配置
方案一:在 package.json 中配置:
方案二:在根目录新建 .browserslistrc 文件
方案一和方案二配置的条件都是 or 关系, 如果要同时满足条件用 and
PostCSS 是一个通过JavaScript来转换样式的工具,这个工具可以帮助我们进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置,但是实现这些工具,我们需要借助于PostCSS对应的插件。
可以在 这里 查询到css样式添加规则。
因为我们需要添加前缀,所以要安装autoprefixer:
命令行直接使用使用postcss工具,并且制定使用autoprefixer:
在webpack中使用postcss就是使用 postcss-loader 来处理的。
安装
配置
第一种方案:
webpack.config.js
第二种:
也可以将plugin封装出来,在根目录新建 postcss.config.js 文件:
webpack.config.js
事实上,在配置postcss-loader时,我们配置插件并不需要使用autoprefixe,我们可以使用另外一个插件: postcss-preset-env 。
postcss-preset-env也是一个postcss的插件,它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境添加所需的polyfill,也包括会自动帮助我们添加autoprefixer(所以相当于已经内置了autoprefixer)。
安装 :
使用
将 autoprefixer 替换成 postcss-preset-env 就行了:
有些插件直接写字符串就行,会自动requre:
问题复现:
假如 main.js 里面引入了 src/index.css ,而 src/index.css 里使用 @import 引入了 src/test.css ,就会出现 src/test.css 文件里的样式不会被 postcss 所处理,这时候就需要配置:
webpack.config.js
要处理jpg、png等格式的图片,我们也需要有对应的loader: file-loader
安装
配置
webpack.config.js
图片资源加载方式:
有时候我们处理后的文件名称按照一定的规则进行显示,比如保留原来的文件名、扩展名,同时为了防止重复,包含一个hash值等。这个时候我们可以使用 PlaceHolders 来完成,webpack给我们提供了大量的PlaceHolders来显示不同的内容。
介绍几个最常用的placeholder:
自定义图片打包名字和输出路径:
webpack.config.js
url-loade r和file-loader的工作方式是相似的,但是可以将较小的文件,转成base64的URI。
安装
配置
和file-loader用法很相似
在webpack5之前,加载这些资源我们需要使用一些loader,比如raw-loader 、url-loader、file-loader,在webpack5之后,我们可以直接使用 资源模块类型(asset module type) ,来替代上面的这些loader。
注意: asset module type 打包的图片资源如果用require不需要 .detault
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
自定义输出文件和文件名
webpack5 的[ext]已经包含了 .
第一种写法:
这种写法包含所有的assetModule的定义,不推荐。
webpack.config.js
第二种写法:
webpack.config.js
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
webpack.config.js
asset 可以实现url-loader的limit效果。
我们可以选择使用file-loader来处理,也可以选择直接使用webpack5的资源模块类型来处理。