当前位置：首页 > 软件库 > Web应用开发 > 网页开发工具 >

postcss-less

用 PostCSS 语法解析 LESS 的模块

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、网页开发工具

软件类型开源软件

地区不详

投递者咸承教

操作系统跨平台

开源组织无

适用人群未知

软件概览

postcss-less 是一个用 PostCSS 语法解析 LESS 的模块

注意: 这个模块需要 Node v6.14.4 以上版本。poscss-less 不是 LESS 编译器。对于 LESS 的编译，请使用 LESS 的官方工具集。

安装

使用 npm：

npm install postcss-less --save-dev

使用方法

postcss-less 最常见的用途是将 PostCSS 的转换直接应用到 LESS 的源代码中。

const syntax = require('postcss-less');
postcss(plugins)
  .process(lessText, { syntax: syntax })
  .then(function (result) {
    result.content // LESS with transformations
});

LESS 的具体解析

`@import`

支持解析 LESS 特定的 @import 语句和选项

@import (option) 'file.less';

AST将包含一个 AtRule 节点，该节点具有:

一个 import: true 属性
一个 filename: 属性，包含导入的文件名
一个 options: 属性，包含任何指定的导入选项

内联注释

支持对CSS中的单行注释进行解析

:root {
    // Main theme color
    --color: red;
}

AST 将包含一个带有 inline: true 属性的 Comment 节点。

变量

支持 LESS 变量的解析

@link-color: #428bca;

AST 将包含一个具有variable: true属性的AtRule节点。

注意：LESS 变量被严格解析 - 冒号 ( :) 必须紧跟在变量名之后。

使用案例

postcss-less2scss：将 Less 转换成 Scss 的 PostCSS 插件

发布一个 PostCSS 插件：postcss-less2scss，可以将 Less 文件转换为 Scss。 * GitHub：https://www.npmjs.com/package/postcss-less2scss * NPM：https://www.npmjs.com/package/postcss-less2scss 转换变量转换变量的定义和使用不属于任何一个 Rule 的变量 L
移动框架适配使用插件 postcss-pxtrem，postcss-px-to-viewport ，修改webpack

适配方案：一、动态设置根元素font-size 、DOM 元素rem 实现方式： 1、开发时使用rem 2、开发时使用px、修改配置文件使用postcss-pxtorem 将PX 转 rem，实现适配步骤：安装：npm install postcss-pxtorem --save-dev 修改：webnpack.config.js require('postcss-
vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配

1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配。 2. 下载： npm install --save postcss-px2rem npm install --save postcss-plugin-px2rem 3. 使用：在vue.config.js中 module.exports = { publicPat
React中组件使用less并且使用postcss-loader、postcss-px2rem时报错:Error: undefined:3:5: missing '}'

通过使用create-react-app创建的react项目,添加了less预处理器后,可以正常编译,没有问题,但是项目时移动端项目,我们需要做移动端的适配,将px单位转化为rem,具体的方式,根据百度来的方式,配置上了,结果报了异常了:如下: ./src/pages/login/login.less (./node_modules/css-loader/dist/cjs.js??ref--6-o
Vue3+Vite 利用postcss-pxtorem移动端适配

1.介绍 postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值，为了能够直接按照设计图的尺寸开发，并且能自动编译转换成rem，下面就来分享下postcss-pxtorem的使用。介绍amfe-flexible amfe-flexible是配置可伸缩布局方案，
移动端布局方案 postcss-pxtorem

通过postcss-pxtorem来实现自动渲染px至rem的开发与生产工作而不需要再手动计算实现方式 postcss-pxtorem：将px转换为px amfe-flexible：为html、body添加font-size，窗口调整时候重新设置font-size 安装与使用安装 npm install amfe-flexible --save npm install postcss-pxt
webpack配置之postcss-loader和postcss-preset-env

在我们打包css的时候难免会遇到css的兼容性问题此时webpack提供了postcss-loader和对应插件postcss-preset-env 而这两个东西的使用在webpack4和webpack5有些许不同 rules: [{ test: /\.css$/, use: [
Vue2适配方案：postcss-px-to-viewport

一、适配方案由于最近整的项目都是钉钉或者企业微信这类的三方平台为容器的第三方应用，这就导致了不管是pc端还是移动端都需要做适配，本来是想使用rem方案，但是我怎么能容忍px之外的计量单位呢，所以就有了以下方案： vue2项目结合postcss-px-to-viewport适配二、配置版本很重要，因为这些版本问题，出现了很多很多的问题当前项目基本环境： node:v16.14.2 npm:
webpack5 使用postcss-preset-env 不生效问题

不需要 process.env.NODE_ENV = ‘development’; 这样写引入 const PostcssPresetEnv = require(‘postcss-preset-env’); **在postcssOptions里面写 { loader:"postcss-loader", option

postcss-less

安装

使用方法

LESS 的具体解析

`@import`

内联注释

变量

同类工具

相关阅读

相关文章

相关问答

相关文档