vscode中htmlcss快速补全插件Emmet用法

html-css046

vscode中htmlcss快速补全插件Emmet用法,第1张

1,后代:>

缩写:nav>ul>li

2,兄弟:+

缩写:div+p+bq

3,上级:^

(1)缩写:div+div>p>span+em^bq

(2)缩写:div+div>p>span+em^^bq

4,分组:()

(1)缩写:div>(header>ul>li*2>a)+footer>p

(2)缩写:(div>dl>(dt+dd)*3)+footer>p

5,乘法:*

缩写:ul>li*5

6,自增符号:$

(1)缩写:ul>li.item$*5

(2)缩写:h$[title=item$]{Header $}*3

(3)缩写:ul>li.item$$$*5

(4)缩写:ul>li.item$@-*5

(5)缩写:ul>li.item$@3*5

说说解决方法。

这种编码是通过encodeURIComponent()方法实现的。那么就改它的源代码,去掉源文件中编码style标签内容的代码。

打开ueditor.all.min.js或者ueditor.all.js,搜索encodeURIComponent,可以找到四个结果。

其中有一处是:

case "style":

case "script":

node.setAttr({

cdata_tag: node.tagName,

cdata_data: encodeURIComponent(node.innerText() || "")

})

node.tagName = "div"

node.removeChild(node.firstChild())

break

删除case 'style':就行。如你还想插入script,就删掉全部。

文接上回,继续看 webpack 的插件:这里默认你已经搭建出来一个 React 框架。我就是在这个基础上演示的。

mini-css-extract-plugin作用: 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中文件过大和因为文件大网络请求超时的情况。

extract-text-webpack-plugin 是 mini-css-extract-plugin 的前身,不过前者在 webpack4 算是废了。

安装依赖:

然后引入,配置提出 css 样式,重命名 css 文件。

其中上面的 rules 还可以修改变成这样:

打包出来的 index.css将会插入 index.html 里面的 head 标签里面。

现在如果使用下面的样式:

其中 transform: rotate(45deg) 是 css3 的样式。我们想批量给它增加前缀。这时就得使用 autoprefixer 。但是还的用一个 loader 来处理,这个 loader 就叫 postcss-loader 。

安装依赖:

配置时 postcss-loader 执行顺序必须保证在 css-loader 之前。

完成之后 在webpack.config.js 同级目录下新建 post.config.js 输入内如下:

打包之前的 css 样式为:

经过插件处理之后为:

如果你不想新建一个 post.config.js 文件的话可以这样配置:

处理的效果是完全和分开写一样的。

这里需要注意的是在 HtmlWebpackPlugin 插件里面的配置压缩 css 参数只对自己创建的模板有效,所以这里引包的 css 并没有压缩。我们还的专门配置 压缩 css 的插件。它就是 optimize-css-assets-webpack-plugin 。 terser-webpack-plugin 是对打包的 JS 进行压缩的。

安装依赖:

注意: 使用 optimize-css-assets-webpack-plugin 插件和 terser-webpack-plugin 插件的时候 webpack 的 mode (模式)一定的是 生产模式(production)

简单配置就能压缩 css 和 JS 了。还是很有用的,压缩完成明显文件变小了。

友情提示: