精华内容
下载资源
问答
  • //从css-loader之后可以通过?追加参数 //modules参数表示为普通css样式表,启用模块化 { test: /\.css$/,use:['style-loader','css-loader?modules']} 使用 //导入列表组件需要的样式表 import cssobj from '@/...
  • react css样式作用域的问题

    千次阅读 2019-12-15 13:19:10
    1、下载css,style依赖 cnpm i style-loader css-loader -D 在 webpack.config.js 中配置 module: { // 第三方匹配规则 rules: [ {test: /\.css&/, use: ['style-loader', 'css-loader']} ...

    1、下载css,style依赖

    cnpm i style-loader css-loader -D
    

    在 webpack.config.js 中配置

      module: {
            // 第三方匹配规则
            rules: [
                {test: /\.css&/, use: ['style-loader', 'css-loader']}
            ]
        },
    

    在页面中引入,发现当时的css样式是应用于全局的。
    在父组件中导入css样式,在子组件中也可以使用。
    react中的css样式是没有作用域的

    import CmtList from '../css/CmtList.css';
    
    <h1 className='title'>这是评论列表</h1>
    

    那么如何是css样式是有作用域的呢?

    2、为css样式添加作用域

    像添加路由文件一样,在声明运用依赖的同时加上参数
    该参数的作用是时css模块化
    添加后项目则不生效了

        module: {
            // 第三方匹配规则
            rules: [
                {test: /\.css$/, use: ['style-loader', 'css-loader?modules']}
            ]
        },
    

    在加上 modules 参数前,打印导入的css模块是一个空对象
    在加上 modules 参数后,打印导入的css模块是在css中声明的class选择器和id选择器

    说明确实将css文件模块化了

    import CmtList from '../css/CmtList.css'
    console.log(CmtList, 'CmtList');  // {}  导入前
    console.log(CmtList, 'CmtList');  
    //{title: "nETG9GHcF81koGv3lI0nZ"}  导入后
    

    当前css中声明了如下样式,但是到处模块化后发现只有class选择器,没有标签选择器。

    所以只能是id选择器和class选择器可以限定作用域,标签选择器的作用域仍旧是全局

    .title {
        font-size: 11px;
    }
    h1{
        color: red;
    }
    

    修改样式引用

    //模块化前
    <h1 className='title'>这是评论列表</h1>
    //模块化后
    <h1 className={CmtList.title}>这是评论列表</h1>
    

    3、自定义类名生成格式

    注:被模块下后,类名会改变

    生成的类名是这样的,一串乱码不知道是干嘛的,我们可以规定其生成的格式

    {title: "nETG9GHcF81koGv3lI0nZ"}  导入后
    

    在webpack.config.js中配置

        module: {
            // 第三方匹配规则
            rules: [
                {test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/},
                {
                    test: /\.css$/, use: ['style-loader', {
                        loader: "css-loader?modules",
                        options: {
                            modules: {
                               localIdentName: '[path][name]==[local]==[hash:5]',
                            }
                        }
                    }]
                }
            ]
        },
    

    我们在css样式中写的是这样:

    .red {
        color: red;
    }
    
    .green {
        color: green;
    }
    

    被模块化后审查css样式
    在这里插入图片描述
    4、某个css样式不想被模块化,

    //css文件
    :global(.green){
        color: green;
    }
    
    //jsx中又可以使用className=字符串来定义了
    <h1 className='green'>哈哈</h1>
    

    .green属性又变成了全局样式

    注::local(.类名)会被模块化,为默认,一般不用

    5、安装boostrap

    cnpm i bootstrap@3.3.7 -S
    

    如果在引用某个包的时候,这个包被安装到了 node_modules 目录中,可以省略 node_modules 这一层目录,直接以包名开始引入自己的 模块 或 样式表

    import 'bootstrap/dist/css/bootstrap.css'
    

    无法解析字体图标文件,需要下载字体依赖的文件
    在这里插入图片描述

    6、安装字体依赖包

    cnpm i  file-loader -D
    
        module: {
            // 第三方匹配规则
            rules: [
                {test: /\.ttf|woff|woff2|eot|svg$/, use: 'file-loader'},
            ]
        },
    

    当前boostrap的css被模块化了,不可以再使用官网定义的类名了。
    如果 exclude: /node_modules/,则webpack不会编译boostrap样式文件了,也不可以。

    规定:
    第三方的 样式表,都是以 .css 结尾, 这样,我们不要为 普通的 .css 启用模块化
    自己的样式表,都要以 .scss 或 .less 结尾, 只为 .scss 或 .less 文件启用模块化

    cnpm i sass-loader  node-sass -D
    
        module: {
            rules: [
                 // 打包处理 CSS 样式表的第三方loader
                { 
                    test: /\.css$/, use: ['style-loader', 'css-loader']
                },
                  // 打包处理自己的sass样式
                {
                    test: /\.scss$/, use: ['style-loader', {
                        loader: "css-loader?modules", options: {
                            modules: {
                                localIdentName: '[path][name]==[local]==[hash:5]',
                            }
                        }
                    }, 'sass-loader']
                }
            ]
        },
    
    展开全文
  • reactcss设置作用域

    千次阅读 2019-01-09 15:14:35
    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage...

    react中使用普通的css样式表会造成作用域的冲突,css定义的样式的作用域是全局,在Vue 中我们还可以使用scope来定义作用域,但是在react中并没有指令一说,所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage配置实现css 的模块化。

    webpack的配置: 截取一小段

     {
    test: /\.css/,
    use:['style-loader','css-loader?modules$localIdentName=[path][name]-[local]-[hash]']
    }
    

    如上所示:

    这里讲解一下localIdentName自定义生成的类名格式,可选参数有:

    • [path]表示样式表相对于项目根目录所在的路径
    • [name] 表示样式表文件名称
    • [local] 表示样式表的类名定义名称
    • [hash:length] 表示32位的hash值
      注意:只有类名选择器和ID选择器才会被模块化控制,类似body h2 span 这些标签选择器是不会被模块化控制

    使用过程如下:

    import cname from '@xxx.css'  => .title{color:red;}
    //这里你可以输出测试一下cname的值 console.log(cname)
    //react中的部分代码
    render() {
      return(
    	  <div>
    	    <h2 className={cname.title}>这里是标题<h2>
    	  </div>
    	)
    }
    

    一句HTml多类名配置如下:

    //test 为全局样式 通过加空格实现
    <h1 className={[cname.title, 'test'].join(' ')}></h1>
    

    当然这里还有一种情况就是在模块化的样式表中,你不希望某个类或者ID被模块化,想让他成为全局样式,可以通过:global配置: .test是你不希望被模块化的类

    //被:global包裹起来的类名,不会被模块化,而是会全局生效
    :global(.test){
      color:blue;  
    }
    
    展开全文
  • React css局部作用域与antd按需加载React css局部作用域Antd按需加载 React css局部作用域 react样式的作用域,一直是开发中比较头疼的问题,在vue中,可以使用scoped来做私有样式的处理,但是在react,声明的样式...

    React css局部作用域与antd按需加载

    React css局部作用域

    react样式的作用域,一直是开发中比较头疼的问题,在vue中,可以使用scoped来做私有样式的处理,但是在react,声明的样式大多都是全局的,当然,我们可以使用属性选择器解决这个问题,但是终归有很多的弊端,其实在react脚手架中,有一种css样式私有化的解决方案。react脚手架通过css module,规定了css可以有局部作用域, 关于css module,看阮一峰老师详解.

    1. css局部作用域
      定义样式文件的的时候,文件名称:xxx.module.css 来命名
      使用:
    // css
    .loginBack {
        width: 100%;
        height: 100%;
        background: url('../../assets/images/login-back2.jpg');
        background-size: cover;
        position: relative;
    }
    
    import React from 'react'
    import style from './style.module.css'
    import { context } from './page'
    
    export default function LoginMain() {
    
        return (
            <div className={style.loginBack}>
                <div className={style.mark}>
                    
                    <div className={style.wTitle}>
                        <p>{context.wTitleTop}</p>
                        <p>{context.wtitleBotton}</p>
                    </div>
                </div>
            </div>
        )
    }
    

    结果:
    在这里插入图片描述

    在浏览器编译时会添加一个随机hash值,保证命名不会冲突

    Antd按需加载

    这里介绍使用react-app-rewired。它的作用是用来帮助你重写react脚手架配置

    展开全文
  • React作用域样式 获取由组件目录界定CSS类 它与CSS模块有何不同? 在CSS模块中,您必须手动导入和分配类 import styles from './button.styl' ; const Button = ( ) => ( < button className = { styles . foo...
  • React作用域CSS 用于ReactCSS封装解决方案 为什么 为了解决css封装的问题,主要有两种方法,css-modules和css-in-js。 但是,它们两个都有很大的问题。 开发人员的体验不好,这意味着您经常需要编写比实现简单样式...
  • 场景1 新建组件Page1与Page2...import React from 'react' import './index.css' function Page1() { return ( <div className='title'>page1</div> ) } export default Page1 src/pages/page1/inde

    场景1

    新建组件Page1与Page2,两个组件的根节点className设置为一样

    目录结构如下:

    src/pages/page1/index.js

    import React from 'react'
    import './index.css'
    
    function Page1() {
      return (
        <div className='title'>page1</div>
      )
    }
    
    export default Page1
    

    src/pages/page1/index.css

    .title {
      background-color: #ccc;
    }
    

    src/pages/page2/index.js

    import React from 'react'
    import './index.css'
    
    function Page2() {
      return (
        <div className='title'>page2</div>
      )
    }
    
    export default Page2
    

    src/pages/page2/index.css

    .title {
      background-color: red;
    }
    

    src/app.js

    import Page1 from './pages/page1';
    import Page2 from './pages/page2';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <Page1 />
            <Page2 />
          </header>
        </div>
      );
    }
    
    export default App;
    

    效果图如下:

    会发现两个组件之间样式会相互影响?是因为最终打包出来的样式渲染到节点上是这样的:

    结论:CSS文件分离 !== CSS作用域隔离

    CSS的一些常见问题

    • 全局污染
    • 命名混乱
    • 代码关系复杂
    • 无法共享变量
    • 复用性差,难维护

    实现CSS样式隔离的几种方式

    • 行内样式,直接在js中编写css
    • namespaces
    • CSS-in-JS,常见的解决方案有styled-components、styled-jsx、react-style
    • CSS Modules

    行内样式

    优点:

    • 写法简单
    • 优先级高,有类似独立作用域

    缺点:

    • 无法复用
    • 内容与样式没分离,难维护

    src/pages/page5/index.js

    import React from 'react'
    
    function Page5() {
      return (
        <div style={{ background: 'red' }}>page5</div>
      )
    }
    
    export default Page5
    

    src/pages/page6/index.js

    import React from 'react'
    
    function Page6() {
      return (
        <div style={{background: 'green'}}>page6</div>
      )
    }
    
    export default Page6
    

    效果图:

    namespaces

    通过css样式变量的命令来做到作用域隔离

    优点:

    • 写法简单,没什么需要特别注意的

    缺点:

    • 团队协作是还是容易出现命名重复的情况出现

    src/pages/page7/index.js

    import React from 'react'
    import styles from './index.less'
    
    function Page7() {
      return (
        <div className={styles.page7}>
          page7
          <p>哈哈哈,我是通过namespaces方案区分的</p>
        </div>
      )
    }
    
    export default Page7
    

    src/pages/page7/index.less

    .page7 {
      background-color: red;
      p {
        font-size: 15px;
        color: #fff;
      }
    }
    

    src/pages/page8/index.js

    import React from 'react'
    import styles from './index.less'
    
    function Page8() {
      return (
        <div className={styles.page8}>
          page8
          <p>哈哈哈,我是通过namespaces方案区分的</p>
        </div>
      )
    }
    
    export default Page8
    

    src/pages/page8/index.less

    .page8 {
      background-color: #398def;
      p {
        font-size: 30px;
      }
    }
    

    效果图:

    CSS-in-JS

    通过写js的方式来写css,react官方也是推荐这样来写。官方文档

    CSS-in-JS地址,可以看到常见的基于CSS-in-JS的解决方案

    优点:

    • 解决了css作用域的问题
    • 复用性

    缺点:

    • 一定的学习成本
    • 与常见的写法不同

    CSS Module

    CSS Module本质是通过三方工具如webpack等,把css的变量唯一化

    效果图:

    从上面可以看出,我设置的类名为styles.header,但是在经过编译后为index__header__2zovj,其实配置一下css-loader开启css modules即可

    配置方式:

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

    大功告成!!!

    总结

    其实css作用域的本质,就是页面中的类名都是唯一的。现在通过编译工具,可以把页面中类名编译为一个唯一的类名,这样就不会出现类名相同的情况下相互影响。

    综合下来,CSS Module会比CSS-in-JS使用起来更方便,对代码的入侵更小,写法也更符合常见的形式,结合三方工具配置起来也挺方便的。

    参考

    展开全文
  • 实时React代码 实时编码React代码的组件! 安装 npm install --save react-code-live 用法 import React from "react" import MyLib from "my-lib" const App = ( ) => { return ( < / div > ) } ; const in
  • css样式作用域的问题(modules,localIdentName, local 和 global) 在 React项目中 使用 bootsrtap( 使用 sass ) React 中 绑定事件 React中双向绑定事件(e.target.value 和 this.refs.txt.value) React...
  • react 模块引入css CSS模块可帮助您为React应用程序中的任何呈现HTML的.js文件创建独立的和自定义的级联样式表。 如果您开始学习React并发现自己正在创建小型项目,那么从主文件中获取所有CSS代码不会有任何问题:...
  • 类似于vue中css作用域有scoped指令作用组件内起作用 css-loader之后可通过?追加参数,类似地址栏url参数形式 固定参数modules,表示普通css样式表,启用模块化 module:{ rules:[ { test:/\.css/,use:['style-...
  • 一些关键插件的版本: 全局插件: create-reat-app:^3.4.1 npx:^6.9.0 项目插件 ..."@craco/craco":"^5.6.4", ..."postcss-loader":"^4.0.4", "tailwindcss":"^1.9.6", "typescript":"~3.7.2" ``` 《craco配...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,330
精华内容 3,332
关键字:

react的css作用域