css中:global()与:local()的区别

该文章测试demo为阮一峰webpack demo中的demo06【[github](https://github.com/ruanyf/webpack-demos)】

文章共1,658字 · 阅读需要大约6分钟

一键AI生成摘要，助你高效阅读

问答

无为有处有还无

6542人浏览 · 2020-09-10 12:25:29

无为有处有还无 · 2020-09-10 12:25:29 发布

:global()-全局作用域与:local()-局部作用域

index.html 普通html网页，引入了bundle.js[webpack打包文件产生的js]
app.css 样式文件，h1样式-局部作用域，h2样式-全局作用域
main.jsx JSX是一种JavaScript的语法扩展，运用于React架构中,用来描述用户界面。在#example中插入相同的h1 h2元素
webpack.config.js 打包配置文件，设定打包规则
bundle.js webpack打包文件产生的js
package.json 配置文件
package-lock.json npm i 自动生成

index.html

<html>
<body>
  <h1 class="h1">Hello World</h1>
  <h2 class="h2">Hello Webpack</h2>
  <div id="example"></div>
  <script src="./bundle.js"></script>
</body>
</html>

app.css

/* local scope */
.h1 {
  color:red;
}

/* global scope */
:global(.h2) {
  color: blue;
}

main.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');

ReactDOM.render(
  <div>
    <h1 className={style.h1}>Hello World</h1>
    <h2 className="h2">Hello Webpack</h2>
  </div>,
  document.getElementById('example')
);

其中，我们将样式文件app.css输入到style对象，然后引用style.title代表一个class。

.title {
  color: red;
}

构建工具会将类名style.title编译成一个哈希字符串

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

webpack.config.js

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
             loader: 'css-loader',
             options: {
               modules: true
             }
          }
        ]
      }
    ]
  }
};

package.json

{
  "name": "webpack-demo6",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack -p"
  },
  "license": "MIT"
}