整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們先問自己一個問題為什么需要預處理器？
答案是不言而喻的，那就是 css 本身有些缺點：
語法不夠強大，不能夠嵌套書寫，導致項目中樣式邏輯一點也不清楚。
沒有變量和邏輯上的復用機制，當有需要復用代碼的時候，只能重復書寫樣式，導致難以維護。
為了處理上面的問題，css 預處理器誕生了，比較流行的就是sass、less、stylus 他們共同的特點是：
變量：提高代碼的復用性。
Sass：使用「$」對變量進行聲明，變量名和變量值使用冒號進行分割
Less：使用「@」對變量進行聲明
Stylus：直接變量名和變量值之間『等號』連接。
作用域
Sass：它的方式是三者中最差的，不存在全局變量的概念
Stylus 和 Less：它的方式和 js 比較相似，逐級往上查找變量
嵌套：對于 css 來說，有嵌套的寫法表達邏輯無疑是更完美的。
三者在這處的處理都是一樣的，使用「&」表示父元素
開始。
項目是在一個簡單的 react 環境里面做的，目錄結構如下：
┣? webpack.config.js ： webapck的配置文件 ┣? package.json：依賴包的身份證 ┣? main.js ：主入口文件 ┣? index.html：首頁 ┣? App.js：App 組件 ┗? :放置樣式表 ┣? scss.scss ┣? stylus.styl ┗? less.less
App.js 文件引入樣式表：
import React, { Component } from "react";
import "./style/less.less";
// import "./style/scss.scss";
// import "./style/stylus.styl";
export default class App extends Component {
render() {
return (
<div>
</div>
)
}
} 在 webpack 中使用：
安裝插件：
npm install --save less less-loader
配置 webpack.config.js 文件：
module.exports = {
module: {
rules: [{
test: /\.[le|c]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'less-loader',
]
}],
}
}; 在 style 文件里面新建 less.less ，并輸入內容：
@bgc: green;
div {
width:100px;
height:100px;
background-color: @bgc;
} npm run dev 運行程序，打開http://127.0.0.1:8080/
單獨使用：
只需要全局安裝 less ，然后：
lessc less.less -o css.css
就能把 less.less 文件轉成 css 格式的樣式表。
在 webpack 中使用：
SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。另外，SCSS 還能識別大部分 CSS hacks（一些 CSS 小技巧）和特定于瀏覽器的語法。所以 scss 就當相于 sass 的 css3。sass 的運行環境是 ruby ，但我們的開發環境一般都是基于 node 開發，所以我們需要安裝 node-sass 提供環境，安裝 sass-loader 翻譯 sass 和 scss 到 css。
安裝環境：
npm install sass-loader node-sass --save
配置 webpack.conifg.js
module.exports = {
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
]
}],
}
}; 在 style 文件里面新建 scss.scss ，并輸入內容：
$body-color: red;
div {
width:100px;
height:100px;
background-color: $body-color;
} npm run dev 運行程序，打開http://127.0.0.1:8080/
在 webpack 中使用：
安裝：
npm install --save stylus stylus-loader
配置 webpack.config.js
module: {
rules: [{
test: /\.styl$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "stylus-loader" // Compiles Sass to CSS
}]
}]
} 在 style 文件里面新建 stylus.styl ，并輸入內容：
bgc = blue div width 100px height 100px background-color bgc
stylus 不需要寫分號！！不需要寫冒號！！甚至連花括號都可以省略！！！完全裸奔代碼。但是一定要注意縮進，因為 stylus 就是根據縮進來識別選擇器層級和對應 css 樣式規則的。定義變量的方法也巨簡單，直接使用 變量名=變量值 的形式。
npm run dev 運行程序，打開 http://127.0.0.1:8080/
單獨使用：
安裝
npm install --save stylus
然后輸入命令：
npx stylus stylus.styl -o stylus.css
就能把 stylus.styl 文件轉成 stylus.css 格式的樣式表。
轉自簡書：cain07
原文鏈接：https://www.jianshu.com/p/07433fb7ec4b
們來看一下SCSS和Sass，瀏覽一下所有CSS和SCSS代碼，您需要從這種樣式語言開始。
在這篇文章中，我想介紹并討論SCSS的功能。如果您是SCSS的新手并且您真的沒有閱讀過很多內容，那么您一定要閱讀此博客以獲取所有信息。
Sass（Syntactically awesome style sheets）是一種樣式表語言，最初由Hampton Catlin設計，由Natalie Weizenbaum開發。Sass是一種預處理器腳本語言，可以解釋或編譯成層疊樣式表（CSS）。SassScript本身就是腳本語言。擁抱Sass一次，你可能永遠不想再回到vanilla CSS了。直到最近，當我不得不在一個項目中切換回vanilla CSS時，我才意識到我多么喜歡和Sass一起工作。在那段時間里，我學到了很多，所以我決定贊美薩斯，讓這個世界變得更美好，讓你變得更快樂。
如何使用Sass
像Sass這樣的預處理器在我們的RoR世界中被廣泛使用，使得編寫CSS變得更加容易和無雜亂。大多數Rails開發人員都知道諸如嵌套，引用選擇器，變量，mixin或擴展指令等優點。但薩斯遠不止于此！
Sass包括兩種類型的擴展名：.scss和.sass。“.scss”文件擴展名完全符合CSS語法，而.sass不完全符合CSS語法，但寫入速度更快。
讓我們從一些安裝和使用Sass的基本技巧開始。
有兩種方法可以使用應用程序或命令行啟動SCSS。
使用命令行查看Sass文檔以進行安裝。
變量
我們可以在變量中定義一個元素，并在我們的Sass代碼中插入它。將模塊保存在單獨的文件中時，這非常有用。變量的最常見用途是調色板，存儲可以在單獨的樣式表中使用的字體聲明，大小和媒體查詢等信息。
例如
$body: #226666;
$primary-color: #403075;
$footer: #AA8439;
$font-stack: Helvetica, sans-serif;
以代碼開頭的代碼 $ 是Sass變量。您可以稍后在樣式表中使用這些變量，它們將映射到您定義的值，例如：
body {
background: $body;
font: $font-stack;
}
.header {
color: $primary-color;
}
a {
color: $primary-color;
}
使用SCSS嵌套
嵌套是SCSS最受歡迎的功能之一。使用嵌套，您可以在聲明的大括號之間添加類。SCSS將非常直觀地編譯和處理選擇器。您甚至可以使用“ &”字符來獲取對父選擇器的引用。
以下示例顯示了基本網頁的結構：
嵌套風格
以下樣式用于創建上面的示例：
header{
padding:10px
background-color: $grey
text-align:center;
.logo{
display:inline-block;
width:140px;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
&:hover{
text-decoration:underline;
}
}
}
}
}
section{
background-color: $grey;
display:inline-block;
width:70%;
border:1px solid $grey;
color: $text-color;
}
aside{
background-color: $grey;
display:inline-block;
width:30%;
border:1px solid $grey;
color: $text-color;
}
footer{
padding:10px;
.copyright{
text-decoration:none;
padding:5px;
&:hover{
text-decoration:underline;
}
}
}
大！現在我們現在如何嵌套樣式工作。我們來看看相應的CSS：
header{
padding:10px
background-color: #ded3d4;
text-align:center;
}
header .logo {
display:inline-block;
width:140px;
}
header nav ul{
margin: 0;
padding: 0;
list-style: none;
}
header nav ul li{
display: inline-block;
}
header nav ul li a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
header nav ul li a:hover{
text-decoration:underline;
}
section{
background-color: #ded3d4;
display:inline-block;
width:70%;
border:1px solid #ded004;
color: #555;
}
aside{
background-color: #ded3d4;
display:inline-block;
width:30%;
border:1px solid #ded004;
color: #555;
}
footer{
padding:10px;
}
footer .copyright{
text-decoration:none;
padding:5px;
}
footer .copyright:hover{
text-decoration:underline;
}
Mixins和Extends
Mixins和extends是強大的功能，有助于避免大量重復。使用mixins，您可以制作參數化CSS聲明，并在整個樣式表中重復使用它們。
假設你有一個盒子，你想給盒子圓角：
@mixin border-radius（$ round）{
-webkit- border-radius：$ round ;
-moz- border-radius：$ round ;
-ms- border-radius：$ round ;
border-radius：$ round ;
}
/ *只需使用'@include'指令來應用mixin * /
.box { @include border-radius（15px）; }
請注意@mixin 頂部的 指令。它已被賦予名稱 border-radius 并使用變量 $round 作為其參數。此變量用于設置每個元素的半徑值。之后，@include 使用參數值調用該 指令，即15px。
這是相應的CSS：
.box {
-webkit- border-radius：15px ;
-moz- border-radius：15px ;
-ms- border-radius：15px ;
border-radius：15px ;
}
如果要在使用@including 指令時為每個角添加不同的大小 ，也可以這樣做; 你只需要指定如下：
.box { @include border-radius(15px 10px 5px 0px); }
您可以創建自己的mixin庫，或者更好的是，您可以使用其中一個社區庫。
該 @extend 指令被稱為Sass最強大的功能之一。此指令允許您將屬性從一個選擇器共享到另一個選擇器。
假設你聲明一個包含屬性的公共類：
.box {
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
現在你想要兩個具有相同屬性但具有不同邊框顏色的類似盒子。
.box-red {
@extend .box;
border-color: red;
}
.box-yellow {
@extend .box;
border-color: yellow;
}
在上面的例子中，我們使用@extend 指令擴展了公共類 。讓我們看看我們需要的完整SCSS來獲得所需的輸出。
.box, .box-red, .box-yellow {
margin: 1em;
padding: 1em;
border: 2px solid red;
}
.box-red {
border-color: red;
}
.box-yellow {
border-color: yellow;
}
import
@import 將由Sass處理，我們所有的CSS和SCSS文件將被編譯為一個文件，最終將在我們的實際網站上。您可以創建包含很少CSS的部分Sass文件，您可以將其包含在其他Sass文件中，即variable.scss，fonts.scss，buttons.scss等，然后我們可以在main / style中包含所有SCSS文件.scss文件夾。如果不導入部分文件，則可以使用mixin和variable等可重用組件。
假設您已經創建了多個文件，并且需要將它們導入main.scss文件：
@import “variables”;
@import “fonts”;
@import “base”;
@import “buttons”;
@import “layout”;
唯一的缺點是為要導入的每個CSS文件觸發單獨的HTTP請求。
載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://wanago.io/2018/07/16/webpack-4-course-part-two-webpack-4-course-part-two-loaders/
今天繼續我們的Webpack 4入門教程。在介紹了Webpack的基本概念之后，是時候更深入一點了。這次我們會涉及Webpack中非常強大的一個東西:loader。首先，我們會學習如何使用那些可用的loader。它將包括如何處理css、scss、圖片以及對老版本的JavaScript語言的轉換。讓我們開始吧！
Webpack 4 入門教程繼續 - 什么是loaders？
在之前的教程，我說Webpack是一個打包器。但這不是它僅有的目的。雖然Webpack天生只能理解JavaScript文件，但可以利用loader來改變這一點。除了能夠處理多種類型的文件，Webpack還能修改它們。
添加loader
使用loader最好的方式是在webpack.config.js文件中指定它們。要這么做，你需要添加module.rules屬性。
css-loader
css-loader能夠翻譯引入的css文件。
npm install css-loader
考慮如下的配置
// webpack.config.js
module.exports={
module: {
rules: [
{
test: /\.css$/,
use: 'css-loader'
}
]
}
};
rules
rules 這個屬性是一個數組，指明你的各個loader。它會作用于匹配到 test 屬性所指定規則的每一個文件。這個規則，實際上，是一個正則表達式。
use
屬性 use 指明需要對匹配的文件應用那個loader。
串聯多個loader
有了上面的代碼，你就能夠在你的JavaScript代碼中導入css文件了。（例如，使用之前我們提到的ES6模塊）
但這還不能讓css真正生效。我們需要一種方法讓瀏覽器能夠使用這些css。這種情況下，style-loader就派上用場了。
npm install style-loader
但那就意味著要對css文件使用兩個loader。你可以通過串聯多個loader(chaining loaders)來使它們都生效。
// webpack.config.js
module.exports={
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
}
你可以看到，我們給了 use 屬性一個數組。一個非常重要的注意點是，串聯執行的順序是反向的（譯者注：也就是從右往左）。
/* style.css */
body {
background-color:black;
}
// index.js
import './style.css'
使用上面的配置，打包的工作方式大概是:
默認情況下，打包后的輸出是./dist/bundle.js。現在，這個文件包含的代碼會把所有的樣式插入到<style>標簽里面。如果你在HTML中引入了bundle.js的連接，在執行完腳本后，HTML會看起來像這樣:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<style type="text/css">body {
background-color:black;
}</style></head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
sass-loader
有了這些知識，你可以輕松地給你的工程添加sass/scss支持了。你可以在這里使用 sass-loader。
npm install sass-loader
只需要在你的loader鏈里插入它:
// webpack.config.js
module.exports={
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
}
就是這樣，現在你可以引入scss文件了！文件在被 css-loader 解析之前，會從scss轉譯成純css。
（譯者注: 如果安裝完sass-loader后，本地運行Webpack出現了和node-sass相關的錯誤，可嘗試再安裝一個node-sass的包解決這個問題，即npm install node-sass）
給loader傳入選擇項
實際上，loader可以接受一些選擇項。讓我們用 url-loader 為例來說明。
npm install url-loader file-loader
// webpack.config.js
module.exports={
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader','sass-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 5000
}
}
]
}
]
}
};
注意，如果你想要給loader傳入配置項，你不再是把loader以字符串形式給 use 屬性。現在它是一個對象，包含兩個屬性: loader（即loader的名字），和 options。
url-loader會把你的圖片轉換為base64格式的URI。如果你的圖片文件很小，那么把它們直接引入到代碼中會有更好的性能。這可以減少瀏覽器所發的請求數。但是，如果你的圖片文件很大，那么把它們作為單獨的文件引入可能會更好，因為瀏覽器可以并行加載它們。
這就是為什么 url-loader 有一個 limit 屬性。它指明了一個文件大小（以byte為單位），當超過這個大小時，文件將不會被轉為base64的URI。相比較而言，file-loader 僅僅是被用來拷貝你的文件。
body {
background-image: url('./big-background.png');
}
.icon {
background-image: url('./icon.png');
}
上面的配置會得到下面的結果：
<style type="text/css">body {
background-image: url(ca3ebe0891c7823ff1e137d8eb5b4609.png); }
.icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAALElEQVR4AWMYIWAU1FPLoP9AXEFI0QEi8H+YYdQyqIEaXuumRhh1DZdUMwoATlYWfwh9eYkAAAAASUVORK5CYII=); }
</style>
因為big-background.png比限制的大小更大，它被拷貝至dist文件夾，并被起了一個隨機的名字。而相反，icon.png文件被轉換為了base64 URI。
使用babel轉譯JavaScript
另一個流行的loader是 babel-loader。它允許你使用Babel轉譯JavaScript文件。它解決了如何使用最新版本的JavaScript來編寫代碼的問題。如果你想支持老版本的瀏覽器，或者想使用現代瀏覽器還沒有實現的功能，Babel都能夠幫到你。
npm install babel-loader @babel/core @babel/preset-env
（譯者注：原文的babel-core和babel-preset-env依賴被替換為@babel/core和@babel/preset-enve，因為新版本的Babel7中對官方提供的依賴使用了命名空間@babel）
module.exports={
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
注意到，我們這里使用了 exclude 屬性，它也是一個正則表達式。如果任何文件與這個表達式相匹配，它將不會被轉譯。
這里有很多預置項可以滿足你的需求。查閱Babel的官方文檔，你可以在那里找到它們的列表。
總結
這一次我們學習了Webpack很有用的一個功能：loader。我們介紹了一些可用的loader。利用它們，我們在項目中添加上了對scss的支持。此外，我們還學習如何使用 url-loader 處理圖片。另外一個loader的常用之處是我們討論的利用Babel轉譯JavaScript。在教程未來的部分，我們會深入到loader中，包括寫一個我們自己的loader。
關于葡萄城：
賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
