通用 css modules 方案 #1417

sorrycc · 2018-11-06T12:42:11Z

使用

a.css

.a { color: red; }

b.css

.b { color: red; }

a.js

import styles from './a.css';
import './b.css';

打包 a.js，输出 css，

.a___6ESeB { color: red; }
.b { color: red }

方案

分两步，

一、通过 babel 插件处理 js 里的 css/less/sass/scss 引用

比如：

import styles from './a.css';
import './b.css';

转换为：

import styles from './a.css?cssModules';
import './b.css';

至于为啥不转换为 import styles from 'css-loader?modules!./a.css';，因为还有 postcss、extract css、css-hot-loader 等需要处理，而且 postcss 的 options 里还有函数，不能通过字符串的方式传递。

二、`module.rules` 里处理带 `?cssModules` query 的资源，走 css modules

示例：

const rule = webpackConfig.module
  .rule('css')
  .test(/\.css$/);

applyCSSRules(
  rule.oneOf('CSSModules').resourceQuery(/cssModules/),
  { cssModules: true, less: true },
);
applyCSSRules(
  rule.oneOf('noCSSModules'),
  { cssModules: false, less: true },
);

兼容考虑

由于会有 break change，所以通过额外的配置项 autoCSSModules 开启，等 umi@3 时默认开启。

参考

The text was updated successfully, but these errors were encountered:

xiaohuoni · 2018-11-06T12:57:13Z

style里面的样式要不要考虑一起处理了o(￣︶￣)o

xiaoxiangmoe · 2018-11-06T14:31:59Z

@sorrycc 为什么不使用cssModulesWithAffix解决呢？

export default {
  disableCSSModules: true,
  cssModulesWithAffix: true,
}

因为如果根据 import 来区分，当遇到

import styles from './a.css';
import './a.css';

的情况下（即需要 defaults import，又需要 side effect import）:

我们不能简单通过css文件名来判断其是否会污染全局的环境
产生的代码，会有一份无 module 前缀的，一份有 module 前缀的 class name

这种表现，会比较奇怪。

sorrycc · 2018-11-06T22:52:25Z

import styles from './a.css';
import './a.css';

这不是正确的用法吧。

xiaoxiangmoe · 2018-11-07T07:39:25Z

@sorrycc 这的确不是正确的用法。

但是一楼提的方案有如下问题：

误用的用法不容易被检查出来。
编译产生的副作用（类名的变化）依赖于调用方，看起来不是很合理。

create-react-app 这种通过文件名是否带.module.(scss|less|css)来区分的方案更合理，唯一的缺点就是文件名长了点。

sorrycc · 2018-11-07T07:57:08Z

误用的用法不容易被检查出来

误用后没有效果不就知道了吗？

编译产生的副作用（类名的变化）依赖于调用方，看起来不是很合理。

我觉得是合理的。create-react-app 处理 svg 也是这个逻辑，比如 import { ReactComponent } from './a.svg' 会被处理成 React 组件，import './a.svg' 则是导出文件。webpack 的 loader 就是为了让文件针对不同场景有不同输出。

xiaoxiangmoe · 2018-11-17T12:31:57Z

@sorrycc https://github.com/mrmckeb/typescript-plugin-css-modules

有些第三方插件默认对 .module.css 开启 css-module 支持。如果我们支持了它，那么我们可以免参数配置使用第三方插件（比如我在全局的 typescript language service 配置一下，每个项目都共用一套配置，当然也会有本地的配置，只不过这方便了我们切换不同版本来查看效果嘛），这也是一个选择 .module.css 的一个理由吧。

import styles from './a.css';
import './a.css';

不是一个合理的做法，那么我们应该禁止掉这种做法，最好的方法应该就是用明显的特征把它区分开，比如文件名（参考 mjs 和 js）

至于 svg 的那个例子，我觉得那个场景不同，那个是为了支持多种用途同时使用，所以才引入的这种语法，而我们 css 是明显不希望同时使用 default import 和 named import 的

wangxingkang · 2019-02-28T09:44:59Z

@sorrycc 这个功能大概什么时间上线

rexleimo · 2019-03-04T08:37:26Z

import '../common/less/barnd.less';

写法


@import "./default.less";
.banner {
    background: url(https://gw.alipayobjects.com/zos/rmsportal/okhVRKJXxQpbpKGtKneS.svg) no-repeat center top;
    background-size: contain;
    overflow: hidden;
    font-family: PingFang SC, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
    .page {
        max-width: 1248px;
    }
    .logo {
        background: url(https://gw.alipayobjects.com/zos/rmsportal/khXpcyRYlACLokoNTzwc.svg) no-repeat;
        width: 127px;
        height: 110px;
        margin: 86px auto 40px;
    }
    & &-anim {
        margin: 0 auto 64px;
        height: 600px;
        box-shadow: 0 20px 32px rgba(1, 4, 8, .12);
        background: #fff;
        border-radius: 8px;
        &-elem {
            .banner-bg {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
                background-position: center;
                background-repeat: no-repeat;
            }
        }
    }
    .seeconf {
        &-wrap {
            text-align: center;
            color: @banner-text-color;
            .banner-button {
                margin: 64px 0 26px;
                .ant-btn {
                    height: 35px;
                    line-height: 35px;
                    border-radius: 35px;
                    background: #2354eb;
                    box-shadow: 0 7px 13px #91a5f2;
                    padding: 0 28px;
                    font-size: 12px;
                    a {
                        text-decoration: none;
                    }
                }
            }
        }
        &-en-name {
            margin: 140px 0 0;
            font-size: 12px;
            line-height: 32px;
        }
        &-title {
            margin: 16px 0 24px;
            font-size: 56px;
            line-height: 68px;
            text-indent: 2px;
            font-weight: 600;
            color: #02063D;
        }
        &-cn-name {
            font-size: 18px;
        }
    }
    &-button {
        .ant-btn {
            color: #fff;
            border: none;
        }
    }
}

编译后

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.barnd__banner___IkHrG {
  background: url(https://gw.alipayobjects.com/zos/rmsportal/okhVRKJXxQpbpKGtKneS.svg) no-repeat center top;
  background-size: contain;
  overflow: hidden;
  font-family: PingFang SC, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.barnd__banner___IkHrG .barnd__page___19R0U {
  max-width: 1248px;
}
.barnd__banner___IkHrG .barnd__logo___2J6Lp {
  background: url(https://gw.alipayobjects.com/zos/rmsportal/khXpcyRYlACLokoNTzwc.svg) no-repeat;
  width: 127px;
  height: 110px;
  margin: 86px auto 40px;
}
.barnd__banner___IkHrG .barnd__banner-anim___2XSRf {
  margin: 0 auto 64px;
  height: 600px;
  box-shadow: 0 20px 32px rgba(1, 4, 8, 0.12);
  background: #fff;
  border-radius: 8px;
}
.barnd__banner___IkHrG .barnd__banner-anim-elem___3AU3D .barnd__banner-bg___3d6h5 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
}
.barnd__banner___IkHrG .barnd__seeconf-wrap___1ZR80 {
  text-align: center;
  color: #5C6899;
}
.barnd__banner___IkHrG .barnd__seeconf-wrap___1ZR80 .barnd__banner-button___1EiwB {
  margin: 64px 0 26px;
}
.barnd__banner___IkHrG .barnd__seeconf-wrap___1ZR80 .barnd__banner-button___1EiwB .barnd__ant-btn___3dZj5 {
  height: 35px;
  line-height: 35px;
  border-radius: 35px;
  background: #2354eb;
  box-shadow: 0 7px 13px #91a5f2;
  padding: 0 28px;
  font-size: 12px;
}
.barnd__banner___IkHrG .barnd__seeconf-wrap___1ZR80 .barnd__banner-button___1EiwB .barnd__ant-btn___3dZj5 a {
  text-decoration: none;
}
.barnd__banner___IkHrG .barnd__seeconf-en-name___Yi2mc {
  margin: 140px 0 0;
  font-size: 12px;
  line-height: 32px;
}
.barnd__banner___IkHrG .barnd__seeconf-title___2BLq5 {
  margin: 16px 0 24px;
  font-size: 56px;
  line-height: 68px;
  text-indent: 2px;
  font-weight: 600;
  color: #02063D;
}
.barnd__banner___IkHrG .barnd__seeconf-cn-name___2QoLk {
  font-size: 18px;
}
.barnd__banner-button___1EiwB .barnd__ant-btn___3dZj5 {
  color: #fff;
  border: none;
}


/*# sourceMappingURL=p__index.chunk.css.map*/

还不是一样被便宜了。。。你这也叫通用？

wangxingkang · 2019-03-05T02:08:06Z

@rainbowMorelhahahah 这个还没上线吧

rexleimo · 2019-03-06T01:50:49Z

@rainbowMorelhahahah 这个还没上线吧

Issue on 6 Nov 2018 · 9 comments 我看时间以为上线了

hankaibo · 2019-03-28T08:29:18Z

@sorrycc 有具体上线日期没？

stale · 2019-05-27T09:20:02Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale · 2019-07-26T10:52:29Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

wangxingkang · 2019-09-09T10:20:28Z

可以先使用 https://github.com/alitajs/umi-plugin-packages/tree/master/packages/umi-plugin-css-modules 解决

wangxingkang · 2019-09-11T07:36:16Z

通用css modules 方案尝试 https://github.com/wangxingkang/webpack-chain-study/tree/master/examples/auto-css-modules

PierisClay · 2019-09-12T07:58:31Z

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

1 yarn add babel-plugin-react-css-modules postcss-less
2 在~/config/config.js中添加

  ...
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        'exclude': 'node_modules',
        'generateScopedName': '[name]__[local]___[hash:base64:5]',
        'filetypes': {
          '.less': {
            'syntax': 'postcss-less',
          },
        },
      },
    ],
  ],
  ...

3 在jsx文件中 import './style.less'

wangxingkang · 2019-09-12T09:33:06Z

官方还是需要一个统一的方案的

ywy94ywy · 2019-09-27T09:46:19Z

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

1 yarn add babel-plugin-react-css-modules postcss-less

2 在~/config/config.js中添加
  ...
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        'exclude': 'node_modules',
        'generateScopedName': '[name]__[local]___[hash:base64:5]',
        'filetypes': {
          '.less': {
            'syntax': 'postcss-less',
          },
        },
      },
    ],
  ],
  ...
3 在jsx文件中 import './style.less'

老兄，sass怎么搞处理啊，我用了babel-plugin-react-css-modules postcss-scss，生成的类名还是对应不上。
另外sass的全局变量该怎么加入UMI呢

stale · 2019-11-26T10:28:02Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

sorrycc · 2020-01-10T00:23:22Z

已在 umi@3 中实现。

fengqingdoufu · 2020-04-02T07:51:05Z

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

1 yarn add babel-plugin-react-css-modules postcss-less

2 在~/config/config.js中添加
  ...
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        'exclude': 'node_modules',
        'generateScopedName': '[name]__[local]___[hash:base64:5]',
        'filetypes': {
          '.less': {
            'syntax': 'postcss-less',
          },
        },
      },
    ],
  ],
  ...
3 在jsx文件中 import './style.less'

哥们，问一下我再项目中按照你这个配置，还需要配置其他吗打包完以后styleName没有被处理，还是当成属性输出了

WebEngineerLi · 2020-08-23T16:05:59Z

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

1 yarn add babel-plugin-react-css-modules postcss-less

2 在~/config/config.js中添加
  ...
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        'exclude': 'node_modules',
        'generateScopedName': '[name]__[local]___[hash:base64:5]',
        'filetypes': {
          '.less': {
            'syntax': 'postcss-less',
          },
        },
      },
    ],
  ],
  ...
3 在jsx文件中 import './style.less'

没有用，我的并没有生效哦

diveDylan · 2021-04-14T05:07:51Z

考虑支持ts的自动提示么，集成typescript插件 typescript-plugin-css-modules，觉得这个超赞 @sorrycc

MrXujiang · 2021-10-27T15:30:16Z

yarn add babel-plugin-react-css-modules postcss-less

可以解决即使用css module，又使用直接导入样式的问题吗，项目开发中很常见的问题时需要导入第三方组件库，但是使用css module后第三方组件自己的样式就无法使用了

MrXujiang · 2021-10-27T16:11:58Z

已在 umi@3 中实现。

ant-pro 的好像还是不行， umi版本已经是3.0+了，无法按需加载第三方组件的样式

williamyorkl · 2021-12-21T08:55:37Z

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

1 yarn add babel-plugin-react-css-modules postcss-less

2 在~/config/config.js中添加
  ...
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        'exclude': 'node_modules',
        'generateScopedName': '[name]__[local]___[hash:base64:5]',
        'filetypes': {
          '.less': {
            'syntax': 'postcss-less',
          },
        },
      },
    ],
  ],
  ...
3 在jsx文件中 import './style.less'

大佬, 按照这个配置还是 negative..... 和下面这位大佬呈现的现象和这个一模一样, 还有什么配置 miss 了么 :-)
#4859

sorrycc added the type(discussion) label Nov 6, 2018

sorrycc mentioned this issue Nov 6, 2018

Roadmap for 2.x #1365

Closed

31 tasks

sorrycc mentioned this issue Nov 7, 2018

早报 @ 2018.11.07 sorrycc/zaobao#93

Open

zhengzhuang96 mentioned this issue Nov 7, 2018

早报来了 @ 2018.11.07 zhengzhuang96/zaobao#1

Open

chunsch mentioned this issue Nov 28, 2018

css modules 处理样式文件规则与 create-react-app 保持一致 NervJS/taro#1266

Closed

umijs deleted a comment from rexleimo Mar 4, 2019

stale bot added the wontfix label May 27, 2019

sorrycc removed the wontfix label May 27, 2019

stale bot added the wontfix label Jul 26, 2019

sorrycc removed the wontfix label Jul 29, 2019

stale bot added the wontfix label Nov 26, 2019

stale bot removed the wontfix label Nov 26, 2019

Wangyage1 mentioned this issue Nov 29, 2019

引入less，想要直接写className="xxx"，但是打包后class并没有加hash后缀？ #3718

Closed

sorrycc closed this as completed Jan 10, 2020

SilentSword69 mentioned this issue Jun 10, 2020

umi3.1怎么在tsx文件中使用styleName? #4859

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

通用 css modules 方案 #1417

通用 css modules 方案 #1417

sorrycc commented Nov 6, 2018 •

edited

Loading

xiaohuoni commented Nov 6, 2018

xiaoxiangmoe commented Nov 6, 2018 •

edited

Loading

sorrycc commented Nov 6, 2018

xiaoxiangmoe commented Nov 7, 2018 •

edited

Loading

sorrycc commented Nov 7, 2018 •

edited

Loading

xiaoxiangmoe commented Nov 17, 2018 •

edited

Loading

wangxingkang commented Feb 28, 2019

rexleimo commented Mar 4, 2019

wangxingkang commented Mar 5, 2019

rexleimo commented Mar 6, 2019

hankaibo commented Mar 28, 2019

stale bot commented May 27, 2019

stale bot commented Jul 26, 2019

wangxingkang commented Sep 9, 2019

wangxingkang commented Sep 11, 2019

PierisClay commented Sep 12, 2019

wangxingkang commented Sep 12, 2019

ywy94ywy commented Sep 27, 2019

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

stale bot commented Nov 26, 2019

sorrycc commented Jan 10, 2020

fengqingdoufu commented Apr 2, 2020

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

WebEngineerLi commented Aug 23, 2020

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

diveDylan commented Apr 14, 2021

MrXujiang commented Oct 27, 2021

MrXujiang commented Oct 27, 2021

williamyorkl commented Dec 21, 2021

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

通用 css modules 方案 #1417

通用 css modules 方案 #1417

Comments

sorrycc commented Nov 6, 2018 • edited Loading

使用

方案

一、通过 babel 插件处理 js 里的 css/less/sass/scss 引用

二、module.rules 里处理带 ?cssModules query 的资源，走 css modules

兼容考虑

参考

xiaohuoni commented Nov 6, 2018

xiaoxiangmoe commented Nov 6, 2018 • edited Loading

sorrycc commented Nov 6, 2018

xiaoxiangmoe commented Nov 7, 2018 • edited Loading

sorrycc commented Nov 7, 2018 • edited Loading

xiaoxiangmoe commented Nov 17, 2018 • edited Loading

wangxingkang commented Feb 28, 2019

rexleimo commented Mar 4, 2019

wangxingkang commented Mar 5, 2019

rexleimo commented Mar 6, 2019

hankaibo commented Mar 28, 2019

stale bot commented May 27, 2019

stale bot commented Jul 26, 2019

wangxingkang commented Sep 9, 2019

wangxingkang commented Sep 11, 2019

PierisClay commented Sep 12, 2019

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

wangxingkang commented Sep 12, 2019

ywy94ywy commented Sep 27, 2019

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

stale bot commented Nov 26, 2019

sorrycc commented Jan 10, 2020

fengqingdoufu commented Apr 2, 2020

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

WebEngineerLi commented Aug 23, 2020

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

diveDylan commented Apr 14, 2021

MrXujiang commented Oct 27, 2021

MrXujiang commented Oct 27, 2021

williamyorkl commented Dec 21, 2021

给 umi 项目添加以 styleName 为类名转化的方法(默认使用less文件)

sorrycc commented Nov 6, 2018 •

edited

Loading

二、`module.rules` 里处理带 `?cssModules` query 的资源，走 css modules

xiaoxiangmoe commented Nov 6, 2018 •

edited

Loading

xiaoxiangmoe commented Nov 7, 2018 •

edited

Loading

sorrycc commented Nov 7, 2018 •

edited

Loading

xiaoxiangmoe commented Nov 17, 2018 •

edited

Loading