webpack 编译命令-2.插件保存并编译

bendan520 webpack

2023-09-04 0 8,674 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

文章目录

Preamble作为CSS的扩展语言，可以快速编译CSS样式webpack 编译命令，进一步提高工作效率。当今主流的CSS扩展语言包括sass和less。两者的句型相似。本文从 Sass 扩展句型开始。 1. 萨斯

全球最成熟、稳定、强大的专业级CSS扩展语言！这是只有在sass官网首页才能看到的一句话。

由于sass是基于Ruby语言开发的，因此在使用sass语言之前必须安装Ruby编译器。 Ruby编译器安装包

Sass语言有两个后缀，分别是.sass和.scss，两者的写法略有不同。

安装教程在Sass官网有详细介绍，本文略过。请参阅此处的安装教程！

2. 编译方法

从命令行编译sass有配置选项，比如编译后的css排版、生成调试图、启用调试信息等，可以使用命令sass -v 来详细查看。

在sass中webpack 编译命令，有四种布局方式，即输出：嵌套、扩展、紧凑和压缩格式。下面将介绍命令行的四个具体命令。

1. 命令行编译

命令行编译，顾名思义，就是通过终端控制台进行编译，从而生成需要的格式。

//未编译样式
.box {
	width: 300px;
	height: 400px;
	&-title {
    	height: 30px;
    	line-height: 30px;
  	}
 }

/*命令行内容*/
/*
	style.scss 需要编译的scss文件名包含后缀
	style.css  设置转变之后的css文件名包含后缀
	nested     编译的方式
*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

使用命令行编译时，需要注意cdm路径当前必须包含需要编译的sass文件，否则会出现编译错误。（包含关系）

2.插件保存并编译

在此之前，我们需要在vscode的扩展插件中找到LiveSassCompiler插件安装，并在setting.json中进行配置。

打开vscode的setting.json文件，添加以下配置项。

"liveSassCompile.settings.formats": [
	// 插件配置项
    {
      "format": "compact", // 设置编译之后的格式
      "extensionName": ".css", // 编译后缀名
      "savePath": "~/../css" // 编译之后的路径，相对路径，此处的意思是将编译之后的文件保存在当前项目的css文件下（没有css文件夹将自动创建）
    }
  ],