内容简介:在 src/assets/ 下新建 common.less :在 main.js 中引入 common.less :
1. 在项目中使用 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-loader
postcss-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,可见浏览器前缀已经加上了:
本人才疏学浅,不当之处欢迎批评指正
以上所述就是小编给大家介绍的《webpack4系列教程(五):处理项目中的资源文件(二)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
CSS 压缩/解压工具
在线压缩/解压 CSS 代码
XML 在线格式化
在线 XML 格式化压缩工具