整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          sass文件命名,sass注釋,sass(@import)

          sass文件后綴名有兩種:
          1、后綴名為sass,不適用用大括號和分號;
          2、后綴名為scss,這種文件跟css文件使用類似,使用大括號和分號;
          (建議使用后綴名為scss的文件,以避免sass后綴名的嚴格格式要求報錯。)
          sass注釋方式有兩種:
          1、標準的css注釋/**/;
          2、//雙斜杠形式的單行注釋(不會被轉譯);

          準的css注釋

          雙斜桿單行注釋


          @import導入
          sass導入(@import)規則和css有所不同,編譯時會將@import的scss文件給整合生成一個css文件。
          但是如果你在scss文件中@import一個css文件如"reset.css",效果跟css文件@import一樣,
          會以@import的形式存在。
          所有的sass導入文件都可以忽略后綴名.scss。
          一般來說基礎的文件命名方法以_開頭,如_mixin.scss。這種文件在導入的時候可以不寫下劃線,可寫成@import "mixin"。

          被導入sass文件a.scss:

          需要導入樣式的sass文件b.scss

          轉譯出來的b.css樣式:

          b.scss編譯后,reset.css文件繼續保持import的方式,a.scss文件被整合進來。

          載請注明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

          原文出處: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'
          

          使用上面的配置,打包的工作方式大概是:

          1. Webpack嘗試解析 style.css 文件
          2. 文件名與正則表達式/\.css$/匹配
          3. 文件被 css-loader 編譯
          4. css-loader 處理后的結果會被傳到 style-loader
          5. 最后,style-loader 返回一串JavaScript代碼

          默認情況下,打包后的輸出是./dist/bundle.js?,F在,這個文件包含的代碼會把所有的樣式插入到<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 屬性?,F在它是一個對象,包含兩個屬性: loader(即loader的名字),和 options

          url-loader會把你的圖片轉換為base64格式的URI。如果你的圖片文件很小,那么把它們直接引入到代碼中會有更好的性能。這可以減少瀏覽器所發的請求數。但是,如果你的圖片文件很大,那么把它們作為單獨的文件引入可能會更好,因為瀏覽器可以并行加載它們。

          這就是為什么 url-loader 有一個 limit 屬性。它指明了一個文件大?。ㄒ詁yte為單位),當超過這個大小時,文件將不會被轉為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 年,是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構,面向全球市場提供軟件研發服務,并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮,在全球被數十萬家企業、學校和政府機構廣泛應用。?


          主站蜘蛛池模板: 久久久国产精品一区二区18禁 | 成人精品一区二区三区不卡免费看 | 久久精品国产一区二区三| 波多野结衣一区视频在线| 小泽玛丽无码视频一区| 亲子乱av一区区三区40岁| 久久亚洲AV午夜福利精品一区| 色一情一乱一伦一区二区三区日本 | 一区二区三区人妻无码| 亚洲国产成人久久一区WWW| 日韩国产免费一区二区三区| 无码国产精品一区二区免费3p| 91精品乱码一区二区三区| 高清一区二区三区免费视频| 久久精品无码一区二区日韩AV | 久久精品国产AV一区二区三区| 中文字幕在线无码一区二区三区| 国产精品资源一区二区| 无码日韩精品一区二区免费| 亚洲综合色一区二区三区小说| 国产成人无码一区二区三区 | 国产经典一区二区三区蜜芽| 天堂国产一区二区三区| 无码精品一区二区三区在线| 国产午夜精品一区二区| 精品国产不卡一区二区三区| 亚洲第一区在线观看| 亚洲国产专区一区| 一区二区三区国模大胆| 一区二区三区视频网站| 精品在线一区二区三区| 日韩十八禁一区二区久久| 国产主播一区二区三区在线观看| 综合一区自拍亚洲综合图区| 成人精品一区二区电影| 国产一区在线视频观看| 日韩AV在线不卡一区二区三区| 无码人妻AⅤ一区二区三区水密桃 无码欧精品亚洲日韩一区夜夜嗨 无码毛片一区二区三区中文字幕 无码毛片一区二区三区视频免费播放 | 色窝窝免费一区二区三区 | 亚洲综合av一区二区三区不卡| 亚洲一区二区三区不卡在线播放 |