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