打包less

打包less

1. 需要安装less 和 less-loader 来解析less代码, 和加载less文件

   ​ npm install less@3

   ​ npm install less-loader@7

2. 在webpack.config.js中 配置加载器, 解析.less文件

   { 
   	test: /\.less$/, 
   	use: ['style-loader', 'css-loader', "less-loader"]
   }
   

3. 但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码

   { 
   	test: /\.less$/, 
   	use: ExtractTextPlugin.extract({ 
   		fallback: "style-loader", 
   		use: ['css-loader', "less-loader"]
   	})
   }
   

4. 观察打包后style.css中多了less文件里的样式代码

5. postcss-pxtorem

浏览 && 画图, 解释rem 如何适配的

此插件是自动把(css/less…文件里 px转换成适配的rem单位), 无需再手动计算了

1. 先下载此插件模块 npm i postcss-pxtorem@5
2. 在postcss.config.js中配置如下

'postcss-pxtorem': {
	rootValue: 16, // 这个值就是你看设计稿上基准字体是多少, 就写多少, 1rem=16px
	unitPrecision: 6, // 小数点几位
	propList: ['*'], // 指定需要转换rem的属性 例如: 'font-size' 'line-height' *代表所有属性
	mediaQuery: false, // 媒体查询的px是否转换
	minPixelValue: 0, // 小于指定数值不转换
	// 默认px识别大写小, 所以不写成px不转换
}

注意: 只对css/less文件内代码有效, 因为webpack.config.js中, 加载器使用了postcss-loader

注意: 如果html中使用px转rem, 可以安装插件, 来自动把px转换成rem使用

注意: html的font-size不会自动随着网页的变化而变化

3. 在index.html模板文件中, 根据当前网页设置html的fontSize, 来让所有rem单位在运行时得到真正的像素大小