注册网站用什么邮箱,广州做网站开发,用phpmysql做网站,博客网站模板1. 背景 css的预处理器语言#xff08;比如 sass#xff0c; less#xff0c; stylus#xff09;的扩展性不好#xff0c;你可以使用它们已有的功能#xff0c;但如果想做扩展就没那么容易。 sass是很常用的css预处理器语言#xff0c;在webpack中要使用它#xff0c;…1. 背景 css的预处理器语言比如 sass less stylus的扩展性不好你可以使用它们已有的功能但如果想做扩展就没那么容易。 sass是很常用的css预处理器语言在webpack中要使用它需要安装sass-loader而sass-loader又依赖于node-sass。大家知道node-sass很庞大安装极其缓慢经常安装失败。而且node-sass各版本对于node版本有严格限制经常造成为了安装某个node-sass版本而升级node版本的问题在本地这没有问题但在服务器上升级node可能牵连很大。 vue项目都安装了postcss因为它是vue-loader的依赖项。我们没必要再安装其它工具处理css。
2. 什么是PostCSS 它是一个js库能够将css转换成js。 它将css转换成AST语法树表现为js对象然后借助各种plugins对转化后的js对象进行操作最终转化回css。 所以说postcss是不会影响css的只有安装和配置plugin之后才会影响css。 postcss可以看作是css的babel。
3. 如何在vue项目中使用和配置PostCSS
3.1 webpack中如何使用PostCSS
使用webpack的vue项目都会安装vue-loader它是一个webpack的loader用来将vue sfc组件转换成js模块。而vue-loader正是借助postcss实现scoped css的因此安装了vue-loader就默认安装了postcss。当然默认它并不包含我们需要的特性因此我们就要安装插件并配置。
关于安装何种插件我们会在后面介绍几种常用的插件。
vue-loader可以自动加载以下3种postcss的配置文件 postcss.config.js .postcssrc package.json 中的postcss字段
这里我们主要介绍第一种postcss.config.js其格式如下 注意 需要先安装插件 module.exports {plugins: [[postcss-import, { path: [src/css/] }],postcss-mixins,postcss-nested,postcss-color-mod-function,[postcss-cssnext, {warnForDuplicates: false,}],[cssnano, {sourcemap: false,autoprefixer: false,safe: true,discardComments: {removeAll: true,},discardUnused: false,zindex: false,}]]
};
对postcss的配置可以查阅 GitHub - webpack-contrib/postcss-loader: PostCSS loader for webpack
3.2 rollup中如何使用PostCSS
rollup需要引入rollup-plugin-postcss并在rollup.config.js配置postcss样例如下
rollup-plugin-postcss的配置参见官方文档
// rollup.config.js
import postcss from rollup-plugin-postcssexport default {plugins: [postcss({plugins: []})]
}
4. 常用PostCSS插件
postcss-import4.1 postcss-import允许从其它 css 文件引入css。 注意这个插件一般需要放在插件列表的第一位这样才能保证其它的插件工作正常。 方式 引入时指定路径则从路径下查找
import ../css/styles.css; 配置中指定 path 并直接引入文件名此时会从path查找
// postcss.config.js
[postcss-import, { path: [src/css/] }] // 在postcss.config.js中指定path
// 在文件中引入
import styles.css; // 会加载src/css/styles.css
4.2 : 允许mixin 注意 如果和postcss-simple-vars或者postcss-nested同用此插件必须放在postcss-simple-vars或者postcss-nested之前 4.3 允许像scss那样定义变量
$dir: top;
$blue: #056ef0;
$column: 200px;.menu_link {background: $blue;width: $column;
}
.menu {width: calc(4 * $column);margin-$(dir): 10px;
}
4.4 允许书写嵌套语法
// postcss.config.js
module.exports {plugins: [[postcss-import, { path: [src/css/] }],postcss-nested]
};
4.5 用来压缩css
4.6 在老旧浏览器上使用新的或者未来的css特性
该插件包含丰富的可选功能可查看文档选择。这里主要用其控制自定义变量custom variables所以介绍如何配置以支持custom variables。
// 配置
module.exports {plugins: [[postcss-import, { path: [src/css/] }],[postcss-preset-env, {stage: 2,// preserve 决定所有的插件是否接受preserve属性保留true或者忽略false其它polyfilled csscss的兜底方案// 这里preserve: false很关键否则自定义变量不起效preserve: false, // feature详情可查看https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md// 它里面有每个特性的文档和样例features: {custom-selectors: true, // 自定义选择器custom-properties: true, // 自定义变量},// importFrom 用来指定从哪里导入各类变量比如 Custom Media, Custom Properties, Custom Selectors, Environment Variables// 如果只引入单个文件可以不用数组importFrom: [./src/css/colorDef.css]}]]
};
引入变量时不需要使用import
style langpostcss scoped/* 变量--color-danger 是在 src/css/colorDef.css文件定义的 但不用导入css文件 */.about {.about-details {color: var(--color-danger);width: 100px;}}
/style
postcss-preset-env 可以配置多个特性见特性列表。
4.7 postcss-px-to-viewport
rem响应式布局的缺陷必须通过js来动态控制根元素font-size的大小。
postcss-px-to-viewport 的配置项
{unitToConvert: px, // 要转化的单位viewportWidth: 3024, // UI设计稿的宽度unitPrecision: 2, // 转换后的精度即小数点位数propList: [*], // 指定转换的css属性的单位*代表全部css属性的单位都进行转换viewportUnit: vw, // 指定需要转换成的视窗单位默认vwfontViewportUnit: vw, // 指定字体需要转换成的视窗单位默认vw// selectorBlackList: [wrap], // 指定不转换为视窗单位的类名minPixelValue: 1, // 默认值1小于或等于1px则不进行转换// mediaQuery: true, // 是否在媒体查询的css代码中也进行转换默认falsereplace: true, // 是否转换后直接更换属性值// exclude: [/node_modules/], // 设置忽略文件用正则做目录名匹配landscape: false // 是否处理横屏情况
}
5. 团队介绍
「三翼鸟数字化技术平台-ToC服务平台」以用户行为数据为基础利用推荐引擎为用户提供“千人千面”的个性化推荐服务改善用户体验持续提升核心业务指标。通过构建高效、智能的线上运营系统全面整合数据资产实现数据分析-人群圈选-用户触达-后效分析-策略优化的运营闭环并提供可视化报表一站式操作提升数字化运营效率。
