webpack4 css樣式自動新增字首

2021-10-03 06:10:44 字數 722 閱讀 7173

css3中新增的樣式可能還存在相容性問題 這個時候就需要我們新增瀏覽器核心的字首

我們可以使用webpack自動幫我們新增 字首

需要安裝倆個 外掛程式

cnpm i postcss-loader autoprefixer -d

// 在 webpack.config.js中},


'css-loader'


,'postcss-loader'


]// 這裡注意了 要寫在 css-loader前面　


},
然後就是在 目錄下 新建乙個 postcss的配置檔案 postcss.config.js

module.exports=
到這裡 還不行 你只是引入了 加字首的外掛程式 但並沒有指明什麼條件下 加字首 還需要乙個條件的檔案

在當面目錄下新建立乙個 .browserlistsrc 檔案

>1%


// 瀏覽器的市場占有 得超過 百分之1


last 2 versions // 瀏覽器的最後倆個版本
這樣使用 npm run build mode:『production』 　　// 生產模式下

檢視生成的 css**

webpack之自動補全css字首

瀏覽器的相容性問題 瀏覽器的標準尚未統一 谷歌 webkit 火狐 moz ie ms 歐朋 o display webkit box 老版本語法 safari,ios,android browser,older webkit browsers.display moz box 老版本語法 firef...

CSS的4種樣式

1.css行內樣式 在開始標籤內新增style樣式屬性 color red 這裡是內容 2.css內部 嵌入 樣式 在head標籤內新增 對於低版本的瀏覽器，無識別樣式標籤。解決辦法 在style標籤內用注釋標籤 理由 高版本的瀏覽器能識別樣式標籤，會自動忽視注釋標籤 低版本瀏覽器可以注釋掉樣式，不...

學習webpack4 樣式處理

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共部分 持續中 注意 開始之前以下內容之前，需要配置一些webpack的基礎配置，傳送門 學習w...