autoprefixer

配置 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 打开

一、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文件