您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)vue如何實現(xiàn)自動添加瀏覽器兼容前后綴的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
1.安裝loader
安裝postcss-loader 和 autoprefixer
下載:
cnpm install postcss-loader autoprefixer --save-dev
在webpack.config.js里面設(shè)置以下代碼
test:/\.css$/, use: ['style-loader','css-loader',{ loader: "postcss-loader", options:{ plugins:[ require("autoprefixer")({ browsers: [ 'ie >= 8', 'Firefox >= 20', 'Safari >= 5', 'Android >= 4', 'Ios >= 6', 'last 4 version' ] }) ] } }]
設(shè)置
在網(wǎng)站上會發(fā)現(xiàn)
以下解釋
補充知識:vue-cli 解決通過js import css無法自動加上瀏覽器前綴
1.找到build/utils.js
2.在exports.cssLoaders內(nèi)添加如下代碼
const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } }
function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } loaders.push(postcssLoader) ...... }
3.在項目目錄下也就是與node_modules同級目錄下新建 .postcssrc.js (注意前面有個點) 添加如下代碼
// https://github.com/michael-ciniawsky/postcss-load-config module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {} } }
4.找到package.json文件添加如下代碼 (注意:與devDependencies字段同級)
"browserslist": [ "last 10 Chrome versions", "last 5 Firefox versions", "Safari >= 6", "ie > 8" ]
5.安裝如下依賴
npm install postcss-import --save-dev npm install postcss-loader --save-dev npm install postcss-url --save-dev npm install autoprefixer --save-dev
關(guān)于vue如何實現(xiàn)自動添加瀏覽器兼容前后綴的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。