資訊專(zhuān)欄INFORMATION COLUMN
摘要：首先安裝在中引入并添加修改和的之后，可見(jiàn)中引入了一個(gè)文件也正是我們?cè)诤椭械拇a可以幫助我們處理，如自動(dòng)添加瀏覽器前綴。在根目錄下創(chuàng)建修改和的在中加入打包之后打開(kāi)，可見(jiàn)瀏覽器前綴已經(jīng)加上了
1. 在項(xiàng)目中使用 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"
]
}
打包之后，在瀏覽器打開(kāi) dist/index.html，less文件中的樣式已經(jīng)通過(guò) style 標(biāo)簽載入了：
?
2. 使用MiniCssExtractPlugin我們之前的樣式代碼都是通過(guò) style 標(biāo)簽載入的，那么如何通過(guò) link 引入CSS文件的方式實(shí)現(xiàn)呢？
這就需要使用一個(gè)插件，在webpack3中通常使用ExtractTextWebpackPlugin，但是在webpack4中已經(jīng)不再支持ExtractTextWebpackPlugin的正式版，而測(cè)試版本又不夠穩(wěn)定，因此我們使用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 之后，可見(jiàn)head中引入了一個(gè) main.css 文件：
?
也正是我們?cè)?common.less 和 modal.css 中的代碼
?
3. postcss-loaderpostcss-loader 可以幫助我們處理CSS，如自動(dòng)添加瀏覽器前綴。
npm i -D postcss-loader autoprefixer
在根目錄下創(chuàng)建 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;
}
打包之后打開(kāi) main.css，可見(jiàn)瀏覽器前綴已經(jīng)加上了：
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101022.html
摘要：傳送門(mén)系列教程一初識(shí)系列教程二創(chuàng)建項(xiàng)目，打包第一個(gè)文件系列教程三自動(dòng)生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開(kāi)發(fā)日益復(fù)雜的今天，我們需要一個(gè)工具來(lái)幫助我們管理項(xiàng)目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無(wú)疑是前端開(kāi)發(fā)者的福音，我的博文只...
摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開(kāi)放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開(kāi)源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
閱讀 2212·2021-10-18 13:28
閱讀 2528·2021-10-11 10:59
閱讀 2352·2019-08-29 15:06
閱讀 1142·2019-08-26 13:54
閱讀 821·2019-08-26 13:52
閱讀 3156·2019-08-26 12:02
閱讀 3009·2019-08-26 11:44
閱讀 2521·2019-08-26 10:56
