在Vue項目中,需要使用autoprefixer工具來自動為CSS樣式添加瀏覽器廠商前綴,從而確保樣式的兼容性。要配置autoprefixer,需要先安裝相關的依賴庫。
安裝依賴庫:
npm install --save-dev autoprefixer postcss-loader在項目中的webpack配置文件中加入以下代碼,對CSS樣式自動加入瀏覽器前綴:
module.exports = { module: { rules: [ { test: /\.(css|scss)$/, use: ['vue-style-loader', 'css-loader', 'sass-loader', { loader: 'postcss-loader', options: { plugins: () =>[ require('autoprefixer')({ browsers: ['ie >= 9', 'last 2 versions'] }) ] } }] } ] } }其中,autoprefixer的參數browsers可以制定要添加的瀏覽器前綴,例如上面的配置會給IE9及以上的版本,以及最新的兩個版本加上瀏覽器前綴。 完成以上配置后,即可自動為CSS樣式添加瀏覽器前綴,保證樣式的兼容性。
上一篇html小兔鮮兒代碼