Webpack實戰(六):如何優雅地運用樣式CSS預處理
上一篇文章中,我主要分享了《Webpack如何分離樣式檔案》CSS 前處理器是一個能讓你通過前處理器自己獨有的語法來生成CSS的程式,css預處理指的是在開發中我們經常會使用一些樣式預編譯語言,在專案打包過程中再將這些預編譯語言轉換成css。這些預編譯語言具有便捷的特性,使用這些,可以減少程式碼編寫,降低專案的開發和維護成本,提高開發效率。
目前比較流行的幾種主要是Sass、LESS、Stylus、PostCSS,今天我主要分享的是Sass、LESS在webpack中的配置及使用情況。
Sass與SCSS
Sass本身是對CSS的語法增強,它有兩種語法,現在使用更多的是SCSS(對CSS3的擴充版本)。所以你會發現,在安裝和配置loader時都是sass-loader,而實際的檔案字尾是.scss。
sass-loader就是將SCSS語法編譯為CSS,因此在使用時通常還要搭配css-loader和style-loader。類似於我們裝babel-loader時還要安裝babel-core,loader本身只是編譯核心庫與Webpack的聯結器,因此這裡我們除了sass-loader以外還要安裝node-sass,node-sass是真正用來編譯SCSS的,而sass-loader只是起到黏合的作用。
安裝命令如下:
npm install sass-loader node-sass --save-dev
/** a.scss **/ $base-color: red; html { body{ color: $base-color; } }
import './a.scss';
document.write('hello webpack2');
如果沒配置wepack.config.js檔案則報下面的錯誤
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
緊接著配置檔案: 如下程式碼
const path = require('path') const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { context: path.join(__dirname, './src'), entry: { index: './index.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, mode: 'development', module: { rules: [ { test: /\.css$/i, use: [{ loader: MiniCssExtractPlugin.loader, options: { publicPath: './dist' }, }, 'css-loader','sass-loader'], // "css-loader" 將 CSS 轉化成 CommonJS 模組 exclude: /node_modules/ }, // 配置.scss正則等 { test: /\.scss$/i, use: ['style-loader', 'css-loader','sass-loader'], // "css-loader" 將 CSS 轉化成 CommonJS 模組 exclude: /node_modules/ }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { cacheDirectory: true, presets: [ [ 'env', { modules: false } ] ] } } } ], }, plugins: [new MiniCssExtractPlugin({ // filename: '[name].css', chunkFilename: '[id].css' })], }
打包之後程式碼如下圖:
編譯後執行的效果圖:
由此可以看出scss已被編譯成css,並在瀏覽器中起了樣式效果應有的作用效果。
如果我們想要在瀏覽器的除錯工具裡檢視原始碼,需要分別為sass-loader和css-loader單獨新增source map的配置項。
把配置檔案稍作修改:
{
test: /\.scss$/i,
use: ['style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
Le s s
Less也是css前處理器,編譯語言,與Sass一樣需要安裝loader和其本身的編譯模組,其安裝命令如下
npm install less-loader less --save-dev
Less在配置上也與Sass相似,在這裡就不再做詳解
總結:
以上就是我要分享的css預處理與webpack的結合使用,主要介紹了Scss和Less兩種的安裝、配置和一些引用,運用這些可以節約成本,提高開發效能和效率。
如果想了解更多,請掃描二維碼:
相關推薦
Webpack實戰(六):如何優雅地運用樣式CSS預處理
上一篇文章中,我主要分享了《Webpack如何分離樣式檔案》CSS 前處理器是一個能讓你通過前處理器自己獨有的語法來生成CSS的程式,css預處理指的是在開發中我們經常會使用一些樣式預編譯語言,在專案打包過程中再將這些預編譯語言轉換成css。這些預編譯語言具有便捷的特性,使用這些,可以減少程式碼編寫,降低專
Android項目實戰(六):JazzyGridView和JazzyListView的使用
@+ java類 gif HR 使用 out tar 項目 適配器 原文:Android項目實戰(六):JazzyGridView和JazzyListView的使用GridView和ListView控件劃動的動畫效果 ---------------------------
webpack學習(六):使用webpack-dev-serve
demo地址: https://github.com/Lkkkkkkg/webpack-demo 上次使用source map功能: https://blog.csdn.net/qq593249106/article/details/84921131** 繼上次配置完HtmlWebpac
Docker實戰(六):Docker安裝Redis
Docker安裝Redis 初次使用Docker安裝各種環境,果然是一堆坑啊,坑,坑,坑,坑死我了。。 大概步驟: 上傳Redis到宿主機,或者在宿主機中下載 編寫Dockerfile構建映象 編寫supervisor配置檔案 build和run
Spring Boot 2.x(六):優雅的統一返回值
為什麼要統一返回值 在我們做後端應用的時候,前後端分離的情況下,我們經常會定義一個數據格式,通常會包含code,message,data這三個必不可少的資訊來方便我們的交流,下面我們直接來看程式碼 ReturnVO package indi.viyoung.viboot.util; import ja
Webpack實戰(四):教教你如何輕鬆搞定-前處理器(loader)
前面三節,我主要給大家分享了有關webpack的一些配置的知識點,如何打包js檔案,而如果我們遇到其他型別的資源如圖片、css、字型font等等,我們該如何處理呢?今天會介紹前處理器(loader),它賦予了Webpack可處理不同資源型別的能力,極大豐富了其可擴充套件性。 如果想了解Webpack的基礎配
Webpack實戰(八):教你搞懂webpack如果實現程式碼分片(code splitting)
2020年春節已過,本來打算回鄭州,卻因為新型冠狀病毒感染肺炎的疫情公司推遲了上班的時間,我也推遲了去鄭州的時間,在家多陪娃幾天。以前都是在書房學習寫部落格,今天比較特殊,抱著電腦,在樓頂晒著太陽,陪著家人,寫著部落格。 前面的幾篇文章主要告訴大家如何安裝、配置webpack、webpack實現樣式分離
Vue2+VueRouter2+webpack 構建項目實戰(三):配置路由,運行頁面
margin not found sans product mage -a nod targe fig 制作.vue模板文件 通過前面的兩篇博文的學習,我們已經建立好了一個項目。問題是,我們還沒有開始制作頁面。下面,我們要來做頁面了。 我們還是利用 http://cno
Vue2+VueRouter2+webpack 構建項目實戰(五):配置子路由
dex log fault 地址 數據 from 插入 接口 content 前言 通過前面幾章的實戰,我們已經順利的構建項目,並且從API接口獲取到數據並且渲染出來了。制作更多的頁面,更復雜的應用,就是各位自己根據自己的項目去調整的事情了。 本章講一下如何配置子路由,
安卓專案實戰之強大的網路請求框架okGo使用詳解(六):擴充套件專案okServer,更強大的下載上傳功能,支援斷點和多工管理
OkGo與OkDownload的區別就是,OkGo只是簡單的做一個下載功能,不具備斷點下載,暫停等操作,但是這在很多時候已經能滿足需要了。 而有些app需要有一個下載列表的功能,就像迅雷下載一樣,每個下載任務可以暫停,可以繼續,可以重新下載,可以有下載優先順序,這時候OkDownload就有
TensorFlow系列專題(六):實戰專案Mnist手寫資料集識別
歡迎大家關注我們的網站和系列教程:http://panchuang.net/ ,學習更多的機器學習、深度學習的知識! 目錄: 導讀 MNIST資料集 資料處理 單層隱藏層神經網路的實現 多層隱藏層神經網路的實現 導讀 就像我們在學
Python3《機器學習實戰》學習筆記(六):Logistic迴歸基礎篇之梯度上升演算法
一 前言 本文從Logistic迴歸的原理開始講起,補充了書上省略的數學推導。本文可能會略顯枯燥,理論居多,Sklearn實戰內容會放在下一篇文章。自己慢慢推導完公式,還是蠻開心的一件事。 二 Logistic迴歸與梯度上升演算法 Logistic迴歸是眾
C#實戰小技巧(六):生成縮圖
在C#開發中,經常會遇到為某張圖片生成縮圖的需求,本文提供一個能夠生成縮圖的C#函式,支援將bmp、png、jpg等常見格式的靜態圖片壓縮,生成縮圖,可以避免png圖片丟失透明度。不過該函式的圖片壓縮方法比較簡單,只能壓縮20M以內的圖片,圖片大於20M將出現記
物聯網平臺構架系列 (六):Amazon, Microsoft, IBM IoT 解決方案導論 之 結語
物聯網; iot; aws; 亞馬遜; greengrass;microsoft; azure;ibm; watson; bluemix最近研究了一些物聯網平臺技術資料,以做選型參考。腦子裏積累大量信息,便想寫出來做一些普及。作為科普文章,力爭通俗易懂,不確保概念嚴謹性。我會給考據癖者提供相關英文鏈接,以便深
Spring 事務配置實戰(一):過濾無需事務處理的查詢之類操作
log pla ssi pan spl tail gif aop img <tx:advice id="txAdvice" transaction-manager="transactionManager"> <tx:attributes
NFS網絡文件系統服務實戰(六)
mount nfs portmap rpcbind NFS網絡文件系統服務實戰: 一、按要求搭建配置NFS服務前準備準備三個服務器或虛擬機A、B、C配置NFS服務器:要求:在NFS服務端A上共享/data/w_shared及/data/r_shared兩個文件目錄,允許從NFS客戶端B,C上分
RabbitMQ學習(六):遠程結果調用
cells actor ble 隨機 get getenv all 求和 int 場景:我們需要在傳輸消息時得到結果 客服端在發送請求時會發送回調隊列,服務端處理事情完成後會將結果返回到回調隊列中,在增加關聯標誌關聯每個請求和服務返回 客戶端代碼: public
Spring Boot 揭秘與實戰(六) 消息隊列篇 - RabbitMQ
-i XML @service 我的文章 tro [] 創意 org ota 文章目錄 1. 什麽是 RabitMQ 2. Spring Boot 整合 RabbitMQ 3. 實戰演練4. 源代碼 3.1. 一個簡單的實戰開始 3.1.1. Configuration
Unity3D之Mecanim動畫系統學習筆記(六):使用腳本控制動畫
ont nim 復制代碼 info rip esc enter machine images 控制人物動畫播放 這裏我重新弄了一個簡單的場景和新的Animator Controller來作為示例。 下面先看看Animator Controller的配置: 人物在站
深入淺出Mesos(六):親身體會Apache Mesos
反饋 存儲 stat tar getting multi -a sources 其他 http://www.infoq.com/cn/articles/analyse-mesos-part-06 關於下一代數據中心操作系統Apache Mesos的系列文章,已經完成的內