修改样式无法两种情况，全局样式修改，局部样式修改
下面我就已一个按钮组件为例子来写个demo
特点： 虽然你是在当前目录下的less或css文件修改了，但是全局生效的，建议如果有全局修改的需求，放到global.less的文件中修改，并做好注释。
如：我这边修改按钮组件的样式
注意：这里就要提到css modules的一个类名加载机制了，上面应该看到了，最外层有个类 为 lqDemo ，因为css modules 的机制是，如果你不使用它，那就不会进行加载。所以无论如果需要在外面加上一个class类，进行使用，否则仅仅引用是不会生效的
这个时候就需要用到css的作用域了
像这样嵌套在:global下就好了
哈哈哈 是不是就解决了，其实还有其它的方式，但我觉得这种方式是最好的
不能。HTML可能经过文本压缩及字符转换。CSS可能做过自动追加前缀，压缩，或者根本就是用预编译器写出来的。Javascript可能经过压缩，优化。另外，如果打包配置中未设置pathinfo为true的话，将不会包含源文件路径。就算多增加一个空格也和原始的不同了吧？不过，当webpack打包时，可以配置生成.map文件，使用此文件可以还原原文件。$ npm install -g cnpm --registry= https://registry.npm.taobao.org // 安装cnpm
$ mkdir project // 根目录下创建一个名为project的文件夹
$ cd project &&cnpm init // 进入project文件夹 并初始化该项目 终端会提示一些配置，一路键入enter最后yes即可。 初始化完成会生成一个pakage.json文件
$ cnpm i --D webpack webpack-dev-server webpack-cli // webpack4.x 必须安装webpack-cli。
根目录下新建文件src/index.js
$ npm run build // 此时我们可以执行npm run build 代替npx webpack。 构建成功后根目录下自动生成 dist/main.js。
为什么我们没有对webpack进行任何配置，却可以成功打包？那是因为在没有配置入口文件的情况下， webpack 4.x会自动查找src/index.js作为入口文件进行打包。
这里我们需要了解webpack4个核心概念——入口(entry)、输出(output)、loader、插件(plugins)。
根目录下创建webpack.config.js
$ cnpm run build
我们可以看到根目录下打包出了dist/main.js。
这时候如果我们将webpack.config.js中入口配置改为
$ cnpm run build
重新构建我们发下dist目录下多出了一个app.js文件，上一次打包的main.js还在，如果我们希望每次打包之前先清除掉上一次的打包文件，则需要用到clean-webpack-plugin插件。
$ cnpm i -D clean-webpack-plugin // vesion: 6.13.4 (6.x版本与低版本引入方式不一样)
安装后我们在webpack.config.js里进行配置 。
首先引入clean-webpack-plugin
再在plugins里实例化
$ cnpm run build
重新构建，我们可以看到上一次打包出的dist/app.js已经删掉了。
首先我们在dist目录下手动增加一个index.html文件，引入main.js
在chrome中打开该html文件，我们可以看到控制台中成功打印出hello world
那么问题来了，难道我们每次打包需要手动在dist目录下添加一个html文件吗？ 显然不可能，这时候我们需要用到html-webpack-plugin插件自动添加html文件。
我们先将dist/index.html文件移动到src下，去掉<script>标签。
$ cnpm i -D html-webpack-plugin
安装好后一样先引入插件 具体插件配置参考官网
$ cnpm run build
此时我们看到dist目录下自动生成了一个index.html文件，里面包含了<div id="root"></div>,
这是因为我们在模板文件里写过。之前我们已经安装过了webpack-dev-server，并在package.json脚本里配置了"dev": "webpack-dev-server" 此时我们可以运行
$ cnpm run dev
终端提示自动运行在localhost:8080, chrome上打开8080端口，查看控制台，我们可以看到打印出了hello world。
$cnpm run dev
这时我们可以看到该项目已经运行在我们制定的端口8989上了。
$ cnpm i -D style-loader css-loader less-loader file-loader url-loader
我们在src目录下新建一个images文件夹，然后拖入一张图片，这里图片名用了smokinggirl.jpeg。 再在src目录下新建一个index.less文件。
然后修改src/index.js src/index.less
src/index.less
webpack.config.js中module部分增加配置
$ cnpm run dev
http://localhost:8989 可以看到有一个宽200px的图片显示出来。
这样打包出来的css 样式会作用到全局，如果页面多可能会相互影响，这时候我们可以启用css模块，配置稍作修改
src/index.js
$cnpm run dev
这时候我们可以看到图片成功显示出来，但仔细观察图片类名，是一串自动生成的字符，与我们自己定义的类名没有半点关系，那么如何显示出我们定义的类名呢？
$ cnpm run dev 这时候可以看到打包出的类名符合我们定义的形式。
但仔细观察，我们发现body还有默认样式，我们可以在index.html引入一个公共样式文件，去除默认样式。
src目录下 新建common/reset-style.css, 写个简单的去默认样式的文件
然后在html模板文件 src/index.html中引入，
这时候我们运行，发现报错找不到该文件。这是因为我们在index.html里引入该文件，但webpack没有打包编译。这时候我们需要用到插件copy-webpack-plugin
$ cnpm i -D copy-webpack-plugin
重新运行，我们可以看到原先的默认样式body的边距已经没有了。
$ npm i -S react react-dom
安装完react、react-dom 还不够，我们需要babel做翻译，才能让浏览器读懂。
$ cnpm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime-corejs2
安装好后根目录新建.babelrc文件。
webpack.config.js 的module里增加babel-loader的配置
配置好我们来写react文件
新建src/page/content/index.js, 将src下的index.less拖入content目录下。
接下来改造src/index.js 入口文件
然后运行 我们可以看到页面正常显示。到这里我们已经可以正确打包并运行react项目了。
$ cnpm i -S antd
根据antd官网描述，我们还需要在入口文件引入一个样式文件。
src/index.js
到这里我们可以发现一个问题，我们对css文件打包的时候启用了模块，很明显这样直接引用是不行的。 antd的样式是从node_modules里引用的，那么我们的思路就是打包css文件时去除掉node_modules里面的文件再启用模块，node_modules里面的文件不启用模块。
接下来我们对webpack.config.json进行改造。
只有这样还不够，我们需要用到babel-plugin-import插件实现按需加载，antd样式应用到全局需要用到此插件。
$cnpm i -D babel-plugin-import
.babelrc
ok现在我们来改造一下src/page/content/index.js文件，引入一个antd组件。
现在我们来运行，发现报了个错
提示我们需要安装一个@babel/plugin-proposal-class-properties插件。
$ cnpm i -D @babel/plugin-proposal-class-properties
然后我们需要在babel的配置文件中加入它
现在我们重新运行 $ cnpm run dev 一个简单的包含antd组件的页面就完成了。
。
