CSSModules

Youngdze 發布于2019-08-30 14:22 / 737人閱讀

摘要：支持不同的構建工具，這里我使用的是下文都是以為例。全局作用域允許用的語法聲明一個全局的作用域。使用普通的寫法，就會引用全局的的樣式我是結果的顯示黑色。的組合在里，一個選擇器可以繼承另一個選擇器。

這篇文章來一起了解 css 模塊化的用法和原理，dome 地址：css modules ?

詳情，可訪問我的博客 lishaoy.net

局部作用域

一般我們引入頁面的 CSS 的作用域都是全局的，都是對這個頁面起作用，產生局部的作用域，就是使用一個獨一無二的 class 的名稱，不會和其它選擇器重名的， CSS Modules 就是這個原理。下面我們看一段代碼

import $ from "jquery";
import styles from "./main.css";
import test from "./test.html";

$("body").append($("我會變綠"));
$("div h1").addClass(styles.testGreen);
$("body").append(test).find("h2").addClass(styles.testBlue);

上面的代碼我把 main.css 輸入到 style 對象，然后下面用了 styles.testGreen 對象的屬性形式調用，就會應用 main.css 里的樣式

.testGreen {
  color: green;
}

構建工具（ webpack ）編譯成一個哈希字符串


    我會變綠

main.css 也會同時編譯

._305zeUSoiGREv3GqPa9H8F {
  color: #aaf200;
}

這樣一來，這個類名就是獨一無二的了，只對應用的組件有效。
CSS Modules 支持不同的構建工具，這里我使用的是 webpack ,下文都是以 webpack 為例。

下面我們來看下 webpack.config.js

module.exports = {
  context: __dirname + "/src",
  devtool: "eval-source-map", //配置生成Source Maps，選擇合適的選項
  entry: {
    app: ["./app.js", "./test.js"],
  },
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
    publicPath: "/assets",
  },
  module: {
    loaders: [
      {test: /.json$/,loader: "json-loader"},
      {test: /.js$/,exclude: /node_modules/,loader: "babel-loader"},
      {test: /.css$/,loader: ExtractTextPlugin.extract({
          fallbackLoader: "style-loader",
          loader: {
            loader: "css-loader",
            query: {
              modules: true
            }
          }
        })
      },
      {test: /.html$/,loader: "html-loader"},
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
};

上面的代碼可以看到，query:{modules:true} 代表開啟 CSS Modules 模塊，這里還配置了把所以得 css 合并一個文件，具體的可以了解 webpack 的 extract-text-webpack-plugin插件。

全局作用域

CSS Modules 允許用 :global(.className) 的語法聲明一個全局的作用域。加了 :global 的不會被編譯成哈希值。

:global(.title) {
  color: black;
}

.title {
  color: red;
}

test.js 使用普通的寫法，就會引用全局的 .title 的樣式

import $ from "jquery";
import styles from "./main.css";
import test from "./test.html";

$("body").append($("我是title"));
$("div h1").addClass("title");

結果 h1 的title顯示黑色。

Class的組合

在 CSS Modules 里，一個選擇器可以繼承另一個選擇器。

在 mian.css 里，我讓 .testBlue 繼承 .testBg 類

.testBg {
  background-color: red;
}

.testBlue {
  color: blue;
  composes: testBg;
}

不用修改 test.js ,應用了 .testBlue 就會有一個紅色的背景。

編譯結果：

.eh33VC37uFHXkCZ8LfKYd {
  background-color: #ff0000;
}

.xrmZso54fTBX29J9G65Ai {
  color: #0c77f8;
}

相應的 html 代碼：


    我會變藍

輸入變量

CSS Modules 支持使用變量，不過要安裝 PsotCSS 和 postcss-modules-values。

$ npm install --save postcss-loader postcss-modules-values

把 postcss-loader 加入 webpack.config.js .

{
    test: /.css$/,
    loader: "style-loader!css-loader?modules!postcss-loader"
},

然后我在 colors.css 里定義了一些變量。

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

在 main.css 里可以這樣引用變量

@value colors: "./color.css";
@value blue, red, green from colors;

.title {
  color: red;
}

.testBg {
  background-color: red;
}

.testGreen {
  color: green;
}

.testBlue {
  color: blue;
  composes: testBg;
  composes: div;
}

這樣就可以把 colors.css 的變量拿過來用了，是不是很神奇。

GPU云服務器云服務器 CSSModules

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115971.html

cssModules從計劃使用到放棄

摘要：隨著工程中代碼量的增加，一套有效的管理規范也是必須和必要的。鑒于以上兩種問題，放棄使用，如同行有好的解決方案歡迎留言。現在我們工程中的做法，每個組件一個組件名稱功能日期，然后使用的天然嵌套方式在此類下進行書寫。在實際開發中，大部分人的精力都在js上，而css的管理總覺得不是那么重要。隨著工程中代碼量的增加，一套有效的css管理規范也是必須和必要的。最近一直想出一個工程中的css的命名...

stormgens 2019-08-30 15:54 評論0 收藏0
關于一次線上出錯的思考--如何規避線上程序崩盤

摘要：近日在工作中由于疏忽問題導致某個客戶的系統直接崩盤，極大的影響了用戶使用產品的體驗。在經過修改之后，不得不思考下在日常開發中的一些壞習慣以及如何規避這些日常問題了。同時由于我們未能對錯誤進行好的處理，導致程序直接卡死。近日在工作中由于疏忽問題導致某個客戶的系統直接崩盤，極大的影響了用戶使用產品的體驗。在經過修改之后，不得不思考下在日常開發中的一些壞習慣以及如何規避這些日常問題了。在...

LiuRhoRamen 2019-08-22 17:57 評論0 收藏0
react搭建后臺管理（react初窺）

摘要：前言以前一直是用進行的開發于是決定年后弄一弄所以年后這段時間也就一直瞎弄可算是看到成果了本來是想寫一個類似仿今日頭條那樣的項目來入手后來又尋思還不如寫個后臺管理呢。于是乎自己便著手簡單的搭建了一個集中設置的版本。前言以前一直是用vue進行的開發, 于是決定年后弄一弄react, 所以年后這段時間也就一直瞎弄react, 可算是看到成果了本來是想寫一個類似 Vue仿今日頭條那樣...

wangjuntytl 2019-08-22 15:23 評論0 收藏0
讓CSS更完美: PostCSS-modules

摘要：起初只是一個美化文檔的工具，但是事情到年發生了變化。對于來說，這意味著有問題的布局。和朝夕相伴的有和最終確定的。他們通過增加前綴的辦法，解決了命名沖突的問題。長長的前綴將成為歷史，歡迎來到未來的世界。譯者注（GeoffZhu）: 這篇適合一些使用過預處理CSS的開發者，比如less，sass或stylus，如果你都沒用過，那你一定不是個好司機。在PostCSS中早就可以使用CSS M...

Barry_Ng 2019-08-30 13:22 評論0 收藏0
用 ReactJs 創建Mac版的 keep

摘要：我們專注移動體育領域的應用開發，倡導開放共享的精神，不模仿，不跟風，只做酷的產品。這就是正在做的事情，我們希望通過科技驅動，讓更多的人熱愛健身，喜歡運動。序因為自己不大喜歡喜歡用手機，所以當在手機上看到有些應用只能在手機上使用時覺得好別扭，但我本身也不是寫移動App的，只是會寫點 js，都說js啥都能干，那我就用它干！關于 Keep Keep 是一個熱愛運動的年輕團隊，同時也是一...

Tychio 2019-08-20 14:27 評論0 收藏0