CSSModules

Youngdze 发布于2019-08-30 14:22 / 736人阅读

摘要：支持不同的构建工具，这里我使用的是下文都是以为例。全局作用域允许用的语法声明一个全局的作用域。使用普通的写法，就会引用全局的的样式我是结果的显示黑色。的组合在里，一个选择器可以继承另一个选择器。

这篇文章来一起了解 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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