如何配置webpack讓瀏覽器自動補全首碼

来源:https://www.cnblogs.com/chase-star/archive/2020/07/04/13233825.html
-Advertisement-
Play Games

一、postcss-loader有什麼用? PostCSS 本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構(Abstract Syntax Tree,AST),再交由插件來進行處理。插件基於 CSS 代碼的 AS ...


一、postcss-loader有什麼用?

  PostCSS 本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構(Abstract Syntax Tree,AST),再交由插件來進行處理。插件基於

CSS 代碼的 AST 所能進行的操作是多種多樣的,比如可以支持變數和混入(mixin),增加瀏覽器相關的聲明首碼,或是把使用將來的 CSS 規範的樣式規則轉譯(transpile)成當前的 CSS 規範支持的格式。從這

個角度來說,PostCSS 的強大之處在於其不斷發展的插件體系。

  在webpack4. 的配置裡面,切記版本不同,postcss-loader的配置會有相應的變化。我們要使用瀏覽器自動補全工具首先要安裝 postcss-loader並配合autoprefixer插件。

(1)首先將兩個必要插件安裝到本地依賴。

npm i postcss-loader autoprefixer -D

 (2) 在 webpack 中配置 module,

module:{
     test: /\.less$/, use: [
         'style-loader'
         'css-loader',
         'postcss-loader',
         'less-loader',
     ]
}

 (3) 創建 postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8",
              "> 1%", // 必須大於 1% 用戶使用的瀏覽器
              //'last 2 versions', // 所有主流瀏覽器最近的 2個版本
          ],
          grid: true
        })
    ]
}

  當

當然還有另外一種配置 postcss-loader 的方式

  在 package.json 文件 加:

"browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
],

  然後 創建 postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}

  

相信到這裡你就會使用 瀏覽器自動補全工具啦


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 迭代函數系統(Iterated Function System,IFS)可以用來創建分形圖案,它是分形理論的重要分支,也是分形圖形處理中最富生命力而且最具有廣闊應用前景的領域之一。這一工作最早可以追溯到Hutchinson於1981年對自相似集的研究。美國科學家M.F.Barnsley於1985年發 ...
  • 說起Web前端開發想必你一定不會陌生,因為現在的前端開發學習的培訓機構也是層出不窮。下麵濟南優就業IT培訓給大家總結出了未來Web前端開發的六大趨勢從中可以大致看出來Web前端未來的發展前景。 趨勢一:更加移動優先 響應式設計顯然是目前Web前端開發領域的主要趨勢之一,並且這一趨勢在未來還將持續一段 ...
  • 首先,為什麼說叫所謂呢? 因為在2007年之前Js給予我們typeof解析數據類型的一共有六種(一直有爭議,但是我們暫時就按typeof來算) 'function' 'Number' 'Object' 'boolean' 'String' 'undefined' 但當我們去 typeof Symbo ...
  • Nuxt 使用 create-nuxt-app 創建項目時,選擇使用 Element-UI 為預設組件庫,發現 Nuxt 沒有開啟 Element-UI 的按需引入配置,需要自行配置。 ...
  • display: none; DOM 結構:瀏覽器不會渲染 display 屬性為 none 的元素,不占據空間; 事件監聽:無法進行 DOM 事件監聽; 性能:動態改變此屬性時會引起重排,性能較差; 繼承:不會被子元素繼承,畢竟子類也不會被渲染; transition:transition 不支持 ...
  • 本文章通過簡單的css和html的操作,來實現Tom貓小游戲的功能,通過簡單的js代碼,讓圖片不斷切換來實現動畫效果。 Tom貓小游戲的HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name= ...
  • 前置 本篇隨筆包含 _.compact 和 _.concat 及其依賴的工具函數。 你可能需要一些 JavaScript 基礎知識才能看懂一些沒有註釋的細節。 compact _.compact(array) 創建一個新數組,包含原數組中所有的非假值元素。例如 false, null, 0, "", ...
  • 如果你是想要學習web前端的新人,那麼恭喜你,看完這篇文章,儘早的選擇好努力的方向和規劃好自己的學習路線,比別人多一點付出並且持之以恆,你就已經贏在了起跑線上。 因為工作原因,經常關註有關互聯網行業的最新動態。這不,剛送走了高考,又迎來了每年的畢業季,看到好多人都說今年的前端工作不好找,很多童鞋簡歷 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...