postcss

配置 less 安装less-loader yarn add less-loader 打开 webpack.config.dev.js 和 webpack.config.prod.js 找到 test: /\.css$/ , 修改为 test: /\.(css|less)$/, 找到 text 字段下的 use ，给use数组在添加一个对象 { loader: require.resolve('less-loader')} 重启服务 启用css作用域 （css只对本页面生效） 打开 webpack.config.dev.js 和 webpack.config.prod.js 找到 loader: require.resolve('css-loader') 下的 options 字段， 给这个对象新增一个字段 modules: true 页面调用 import style from './style.less' console.log(style) // class名均为style对象的key，所以调用必须使用style.App render() { return ( <div className={style.App}> </div> ) } 重启服务 & 查看效果 px转换成rem 安装 postcss-px2rem yarn add postcss-px2rem 打开

导读 哈哈哈，它踏着轻快的步伐来啦。 如果你还没有看过我的《 大声对webpack4.0说声你好之webpack的基本使用(一) 》,建议您先大致浏览，因为我会接着上一节的代码继续记笔记。 本篇你将会对loader有个初步认识，还会对一些常用的静态资源打包，例如图片、样式、字体等，如果你想学习更多关于loader的知识点和其他的，记得关注我，我将会尽快更新。 思考到大家可能觉得阅读文章有些许枯燥，然后我决定将代码放到 github-webpack 上面，代码里面使用webpack的地方，我也写了详细的注释，如果有用请记得✨，有问题可以及时交流。 如果你是webpack的初学者，那么你跟着我的代码，手动的敲打一下键盘，相信你也能和我一样快速步入webpack的神圣殿堂。因为我会将所有的笔记都做得非常非常仔细，让你在运行的过程中不受任何阻拦。 loader 为了彻底的搞懂什么是loader，我们先来做一个小练习，通过它来认识我们的loader。 打包图片练练手 webpack号称可以对文件进行打包，我们第一部分完全是对js文件进行打包，那么我们能不能对图片进行打包呢？ 首页先根目录下新建文件夹statics作为我的资源文件夹， 1. 准备资源 mkdir statics // 新建静态资源文件夹 // 拷贝一个shu.jpg的图片 2.图片资源引入到index.js中 //index

写到前面：故虽然我事前也查阅了许许多多的博客专栏书籍，但是由于很多教程都是几年以前的，其不少插件或loader均进行了升级迭代不再是以前的用法，其新的使用方法均需一个一个手动查询。如有误，望指教。感恩！ ❞ 写在开头 我想这些你应该事先知道 1. webpack是干什么的，它如今在前端是一个什么样的地位 这个其实不用多说了，如今的前端项目哪里还有用不到打包工具的呢，而webpack又作为打包工具中的王者我们又有什么理由不去搞明白它呢。 2. commonjs与ES6 Module不应该了解吗 先简单说一下吧 通常node中便是使用commonjs，其导入使用 require ,导出使用 module.exports ES6 Module中即导入使用 import ,导出则有两种 命名导出export 默认导出export default，对外输出了一个名为default的变量，因此不需要像命名导出一样进行变量声明，直接导出值即可。一个文件只能有一个 注意注意的是：在导入一个模块时，对于CommonJS来说获取的是一份导出值的拷贝；而在ES6 Module中则是值的动态映射，并且这个映射是只读的。 还有一些AMD和UMD，模块的东西先了解到这里吧。毕竟这里是为webpack做铺垫的 3. entry&chunk&bundle之间的关系 这张图已经很明确了吧 4

本文相关代码地址： github 效果展示： react-demo 项目创建 创建项目文件夹 mkdir react-demo cd react-demo npm init -y 复制代码 依赖安装 yarn add react react-dom yarn add webpack webpack-cli webpack-dev-server webpack-merge babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env file-loader jsx-loader css-loader style-loader url-loader less less-loader --dev 复制代码 webpack 配置 区分开发环境 development 和生产环境 production 配置 分别创建对应的 配置文件 antd-mobile 按需加载 安装插件 yarn add babel-plugin-import -D 复制代码 修改 babel.config.js 配置 module .exports = { presets : [ "@babel/preset-env" , "@babel/preset-react" ]

引言 近期，华为云DevCloud推出了开发者友好的深色模式，深受开发者们的喜爱和关注。大家都知道，深色模式（Dark Mode）在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前，深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度，使得使用人员长时间盯着屏幕眼睛没有那么疲惫；后者通过深色模式来降噪，从而突出主体内容部分。随着产品技术的迭代，在支持css自定义属性（又称css变量，css variables）的现代浏览器，完全可以在运行时实时新增主题，摆脱传统css主题文件加载模式下的主题需要预编译内置不能随时修改的弊端。 接下来，我们看一下如何使用css自定义属性来完成深色模式和主题化的开发。 主题切换器开发 首先我们需要打通一套支持css自定义属性的开发模式。 CSS自定义属性使用 这里简单介绍一下CSS自定义属性，有时候也被称作CSS变量或者级联变量。它包含的值可以在整个文档中重复使用。自定义属性使用 -- 变量名 : 变量值 来定义，用var(-- 变量名 [, 默认值 ]) 函数来获取值。举一个简单例子: <!--html--> <div><p>text</p></div> /* css */ div { --my-color: red; border: 1px solid var(--my-color); } p { color:

一、postcss-loader有什么用? 　　PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。从这 个角度来说，PostCSS 的强大之处在于其不断发展的插件体系。 　　在 webpack4. 的配置里面，切记版本不同，postcss-loader的配置会有相应的变化。我们要使用浏览器自动补全工具首先要安装 postcss-loader并配合autoprefixer插件。 （1）首先将两个必要插件安装到本地依赖。 npm i postcss-loader autoprefixer -D (2) 在 webpack 中配置 module， module：{ test: /\.less$/, use: [ 'style-loader' 'css-loader', 'postcss-loader', 'less-loader', ] } (3) 创建 postcss.config.js文件

Rollup+Ts构建前端应用 前言 最近接手一个新的需求，纯html模版开发，对于已经习惯前端工程化开发的我来说，再回到 html+css+js 的时代，着实有点苦难，于是利用 Rollup+Ts+Scss 来进行开发。 项目搭建 # 项目初始化 npm init # 安装需要的依赖 yarn add rollup typescript rollup-plugin-postcss rollup-plugin-typescript tslib -D 复制代码 rollup-plugin-typescript 插件依赖 tslib ,需要提前安装好，不然运行的时候会出现找不到 tslib 依赖的错误。 配置tsconfig.json // tsconfig.json { "compilerOptions" : { "outDir" : "es" , "target" : "ESNext" , "declaration" : true , "noImplicitAny" : true , "removeComments" : true , "noUnusedLocals" : true }, "include" : [ "src/**/*" , "./declaration.d.ts" ], "exclude" : [ "node_modules/**/*" ] } 复制代码

# 1.CSS3简介 - 前缀 google/safari : -webkit- ie : -ms- firefox : -moz- opera : -o- - 前缀官方网址 参考手册：http://css.doyoe.com 权威网站：http://www.caniuse.com - 预处理器:pre-processor less/sass cssNext插件 cssNext:用来实现一些未来的标准（未完全在各大浏览器实现的功能） - 后处理器:post-processor 后处理器插件 autoprefixer : 可以帮助我们自动添加前缀 - postCss + 插件 （充分体现了扩展性） 用JS实现的css抽象的语法树 AST(Abstract Syntax Tree) 剩下的是留给了后人来做 来源： oschina 链接： https://my.oschina.net/u/4413947/blog/4282731

Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS，可以实现css3代码自动补全。也可以轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行。详情见， https://github.com/postcss/autoprefixer 具体安装和配置： 1.首先当然是安装node.js; （略） 2.安装Autoprefixer， 见 https://github.com/postcss/autoprefixer ： sudo npm install autoprefixer -g 要不要加 sudo ，或者是不是全局安装（ -g ）那就看你自己的环境了。 npm太慢，我是用淘宝的 NPM 镜像的 https://npm.taobao.org/ 3.安装postcss-cli Autoprefixer其实是postcss的插件，见 https://github.com/code42day/postcss-cli sudo npm install postcss-cli -g 4.配置External Tools 打开Webstorm设置，Preferences -> Tools -> External Tools ;点击新增按钮，如图： 填写具体配置，例如我的配置，如图： Program:填入你的postcss

导读 微前端已经成为前端领域如今比较火爆的话题，关于微前端价值的讨论，可以参考克军的 《拥抱云时代的前端开发框架——微前端》 。微前端在技术方面，有一个始终绕不过去话题就是前端沙箱。本篇具体探讨一下，在微前端领域如何实现前端沙箱。 背景 应用沙箱可能是微前端技术体系里面最有意思的部分。一般来说沙箱是微前端技术体系中不是必须要做的事情，因为如果规范做的足够好，是能够避免掉一些变量冲突读写，CSS 样式冲突的情况。但是如果你在一个足够大的体系中，总不能仅仅通过规范来保证应用的可靠性，还是需要技术手段去治理运行时的一些冲突问题，这个也是沙箱方案成为微前端技术体系的一部分原因。 首先纵观各类技术方案，有一个大前提决定了这个沙箱如何做：最终微应用是 单实例 or 多实例 存在宿主应用中。这个直接决定了这个沙箱的复杂度和技术方案。 • 单实例：同一个时刻只有一个微应用实例存在，此刻浏览器所有浏览器资源都是这个应用独占的，方案要解决的很大程度是应用切换的时候的清理和现场恢复。比较轻量，实现起来也简单。 • 多实例：资源不是应用独占，就要解决资源共享的情况，比如路由，样式，全局变量读写，DOM. 可能需要考虑的情况比较多，实现较为复杂。 最开始我们的想法是： 从业务场景：我们可能存在的情况是当用户操作一个产品 A 的同时和另一个产品 B 发生了关联操作，需要唤醒应用 B 做操作