- 在项目中使用 less 在 src/assets/ 下新建 common.less ：body{ background: #fafafa; padding: 20px;}在 main.js 中引入 common.less ：import ‘./assets/style/common.less’安装 less-loader：npm i less-loader -D添加 rules： { test: /.less$/, use: [ ‘style-loader’, ‘css-loader’, ’less-loader’ ] }打包之后，在浏览器打开 dist/index.html，less文件中的样式已经通过 style 标签载入了： 2. 使用MiniCssExtractPlugin我们之前的样式代码都是通过 style 标签载入的，那么如何通过 link 引入CSS文件的方式实现呢？这就需要使用一个插件，在webpack3中通常使用ExtractTextWebpackPlugin，但是在webpack4中已经不再支持ExtractTextWebpackPlugin的正式版，而测试版本又不够稳定，因此我们使用MiniCssExtractPlugin替代。首先安装：npm install –save-dev mini-css-extract-plugin在webpack.config.js 中引入并添加 plugins ：const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)new MiniCssExtractPlugin({ filename: “[name].css” }), 修改 CSS 和 less 的 rules：{ test: /.css$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, ‘css-loader’ ] }, { test: /.less$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, ‘css-loader’, ’less-loader’ ] }npm run build 之后，可见head中引入了一个 main.css 文件： 也正是我们在 common.less 和 modal.css 中的代码 3. postcss-loaderpostcss-loader 可以帮助我们处理CSS，如自动添加浏览器前缀。npm i -D postcss-loader autoprefixer在根目录下创建 postcss.config.js：const autoprefixer = require(‘autoprefixer’)module.exports = { plugins: [ autoprefixer({ browsers: [’last 5 version’] }) ]}修改 css 和 less 的 rules：{ test: /.css$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, { loader: ‘css-loader’, options: { importLoaders: 1 } }, ‘postcss-loader’ ] }, { test: /.less$/, use: [ // ‘style-loader’, { loader: MiniCssExtractPlugin.loader }, ‘css-loader’, ‘postcss-loader’, ’less-loader’ ] }在 modal.css中加入：.flex{ display: flex;}打包之后打开 main.css，可见浏览器前缀已经加上了： 本人才疏学浅，不当之处欢迎批评指正