webpack2與Less使用教程

當咱們在項目裏寫大量的css的時候，會有如下幾個問題：太多重複性的規則、查找定位和修改太依賴編輯器、替換修改太麻煩等等。基於這類問題，咱們能夠用css預處理器來解決，例如Less，Sass，Stylus和PostCSS，讓代碼更加有條理和易於維護

css預處理器能夠給咱們帶來如下好處：

• 變量 - 定義經常使用的變量

• 計算 - 實現值的計算

• 混合 - 代碼複用或繼承

• 函數 - 強大的函數來操做屬性和值

經過預處理器，將css預文件編譯爲css文件，維護和開發直接面向預文件，解決以往的開發痛點

下面將以Less爲例子，簡單介紹這款css預處理器的用法和一些技巧

教程以webpack爲構建工具，配合react去作的，你們湊合着看吧~

安裝Less

經過NPM安裝

npm install less -g

經過Yarn安裝

yarn add less -g

而後你就能夠在終端用lessc命令，對已寫好的less文件編譯爲css文件，以下

lessc styles.less > styles.css

結合webpack2

假設你已經安裝好webpack2和webpack-dev-server,接着還須要先安裝一些loader，以下

yarn add less less-loader css-loader style-loader --dev

style標籤內聯

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use:[ 'style-loader','css-loader','less-loader'],
      },
    ],
  },
};

這樣就會自動解析css和less，如何將其放到head裏的style,style-loader就是負責style標籤的生成

style標籤外聯

若是咱們想要放到一個style.css文件裏，怎麼實現？以下

先安裝插件

yarn add extract-text-webpack-plugin --dev

而後再修改配置webpack.config.js爲

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use: ExtractTextPlugin.extract({
          use:[ 'css-loader','less-loader'],
          fallback: 'style-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'index.css',
      disable: false,
      allChunks: true,
    }),
  ],
};

支持CSS Modules

什麼？你想讓其支持CSS Modules

修改配置webpack.config.js爲

module: {
  rules: [
    {
      test: /\.(less|css)$/,
      use: ExtractTextPlugin.extract({
        use:[
          {
            loader: 'css-loader',
            options:{
              modules:true,
              importLoaders:1,
              localIdentName:'[local]',
            }
          },
          {
            loader:'less-loader',
          },
        ],
        fallback: 'style-loader',
      }),
    },
  ],
},

這步其實已經涉及到CSS Modules的部份內容，先省略，下回分解

Less使用學習

Variables

Less可讓咱們像標準的編程語言同樣去建立變量，這樣咱們就能夠再同一個地方存儲咱們經常使用的屬性值，如顏色，尺寸，選擇器，字體，URL等等。以下所示

Less:

@background-color: #eee;
@text-color: #333;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

CSS:

p{
  background-color: #eee;
  color: #333;
  padding: 15px;
}

see more

Mixins

Less可讓咱們實現先有class或id的樣式直接應用於別的選擇器中，主要有兩種用法

Less:

#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

CSS:

#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}

若是咱們不想讓被選擇的樣式單獨出現，則以下

Less:

#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}

CSS:

#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}

注意到區別了嗎？前者是#circle,後者是#circle()

see more

Nesting and Scope

這部分應該算是用得最多的了。對各類選擇器進行嵌套使用

Less:

ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS:

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

see more

還有其變量在其使用的選擇器域內聲明別的值，會影響其嵌套下的選擇器的變量的值

Less:

@text-color: #000000;

ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;

  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS:

ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

see more

Operations

咱們也能夠使用數學計算去作一些數值或顏色的計算，看下面的例子

Less:

@div-width: 100px;
@color: #03A9F4;

#left{
  width: @div-width;
  background-color: @color - 100;
}

#right{
  width: @div-width * 2;
  background-color: @color;
}

CSS:

#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

Functions

Less也有本身的函數，例如獲取圖片大小，單位轉換，數組等等，例如

經過image-width、image-height和image-size，咱們能夠直接獲取圖片的尺寸大小

Less:

.img{
  width:image-width("../img/less-logo.png");
  height:image-height("../img/less-logo.png");
  margin:image-size("../img/less-logo.png");
}

CSS:

.img {
  width: 300px;
  height: 100px;
  margin: 300px 100px;
}

數組也蠻經常使用的，變量定義了好一串咱們要用的值，能夠經過其位置直接拿到值，這裏得注意的是Less的數組是從1開始的

Less:

@list: red, blue, green, yellow;
.list{
  color:extract(@list, 1);
  border-color:extract(@list, 2);
  background-volor:extract(@list, 3);
}

CSS:

.list {
  color: red;
  border-color: blue;
  background-volor: green;
}

see more

Others

& 用於在嵌套寫法時，直接繼承上一個選擇器名，例如

Less:

.a{
  &:hover{
    color:red;
  }
}
.p, .a, .ul, .li {
  border-top: 2px dotted #366;
  && {
    border-top: 0;
  }
  & + & {
    border-top: 0;
  }
}

CSS:

.a:hover{
    color:red;
}
.p, .a, .ul, .li {
  border-top: 2px dotted #366;
}
.p.p, .p.a, .p.ul, .p.li,
.a.p, .a.a, .a.ul, .a.li,
.ul.p, .ul.a, .ul.ul, .ul.li,
.li.p, .li.a, .li.ul, .li.li {
  border-top: 0;
}
.p + .p, .p + .a, .p + .ul, .p + .li,
.a + .p, .a + .a, .a + .ul, .a + .li,
.ul + .p, .ul + .a, .ul + .ul, .ul + .li,
.li + .p, .li + .a, .li + .ul, .li + .li {
  border-top: 0;
}

import讓咱們直接引入別的less文件，最後跟着一塊兒編譯爲css

other.less:

@background-color: #eee;
@text-color: #333;

p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}

Less:

@import "other.less";

CSS:

p{
  background-color: #eee;
  color: #333;
  padding: 15px;
}

結語

Less還有不少，例如if和loop,更多的進階學習能夠查看官方文檔

文章首發於 https://www.linpx.com/p/webpa...

歡迎訪問個人博客：https://www.linpx.com/

參考

• webpack.js.org/loaders/css-loader

• webpack.js.org/loaders/style-loader

• webpack.js.org/loaders/less-loader

• lesscss.org