资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/webpack项目轻松混用css module

webpack项目轻松混用css module

LiuZh / 1506人阅读

摘要：前言前言本文讲述开启模块功能之后，如何与引用的包中样式文件不产生冲突。在不做特殊处理的前提下，样式文件将会被转译成。

前言

本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。
比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。

一、产生问题的原因

</>复制代码 
  1. { 
  2.     test: /.css$/,
  3.     use: [
  4.         "style-loader",
  5.         {
  6.             loader: "css-loader",
  7.             options: {
  8.                 modules: true,
  9.                 localIdentName: "[hash:base64:6]"
  10.             }
  11.         },
  12.         "postcss-loader"
  13.     ] 
  14. }

以上代码片段，摘自webpack配置的module.rule。
可以看出wepack在编译过程中，遇到.css结尾的文件，都会交由postcss-loader、css-loader和style-loader依次处理。
因为css-loader开启了css模块功能，所以，所有经过处理的css文件，类名都将被改变。

二、初步改进

使用exclude和include进行区分

1.node_module文件夹内的文件，避免被当前rule处理

</>复制代码 
  1. { 
  2.     test: /.css$/,
  3.     use: [
  4.         {
  5.             loader: "style-loader"
  6.         }，
  7.         {
  8.             loader: "css-loader",
  9.             options: {
  10.                 modules: true,
  11.                 localIdentName: "[hash:base64:6]"
  12.             }
  13.         },
  14.         {
  15.             loader: "postcss-loader"
  16.         }
  17.     ],
  18.     exclude:[path.resolve(__dirname, "..", "node_modules")]
  19. }

如上所示，将node_module文件夹内的文件，用exclude排除在外，不用当前rule进行处理。

2.多带带处理node_module内的css文件

</>复制代码 
  1. { 
  2.     test: /.css$/,
  3.     use: [
  4.         {
  5.             loader: "style-loader"
  6.         },
  7.         {
  8.             loader: "css-loader"
  9.         },
  10.         {
  11.             loader: "postcss-loader"
  12.         }
  13.     ],
  14.     include:[path.resolve(__dirname, "..", "node_modules")]
  15. }

三、升级版，支持css module模式和普通模式混用

1.用文件名区分两种模式

  • *.global.css 普通模式
  • *.css css module模式

这里统一用 global 关键词进行识别。

2.用正则表达式匹配文件

</>复制代码 
  1. // css module
  2. { 
  3.     test: new RegExp(`^(?!.*.global).*.css`),
  4.     use: [
  5.         {
  6.             loader: "style-loader"
  7.         }，
  8.         {
  9.             loader: "css-loader",
  10.             options: {
  11.                 modules: true,
  12.                 localIdentName: "[hash:base64:6]"
  13.             }
  14.         },
  15.         {
  16.             loader: "postcss-loader"
  17.         }
  18.     ],
  19.     exclude:[path.resolve(__dirname, "..", "node_modules")]
  20. }
  21. // 普通模式
  22. { 
  23.     test: new RegExp(`^(.*.global).*.css`),
  24.     use: [
  25.         {
  26.             loader: "style-loader"
  27.         }，
  28.         {
  29.             loader: "css-loader",
  30.         },
  31.         {
  32.             loader: "postcss-loader"
  33.         }
  34.     ],
  35.     exclude:[path.resolve(__dirname, "..", "node_modules")]
  36. }

四、其他问题

less在使用css module时，对url的解析存在冲突，可以用resolve-url-loader进行解决，直接上代码：

</>复制代码 
  2. test: /.less/,
  3. use: [
  4.     {
  5.         loader: "style-loader"
  6.     },
  7.     {
  8.         loader: "css-loader", 
  9.         options: {
  10.             sourceMap: true,
  11.             importLoaders: 2
  12.         }
  13.     },
  14.     {
  15.         loader: "postcss-loader", 
  16.         options: {
  17.             sourceMap: true
  18.         }
  19.     },
  20.     {
  21.         loader: "resolve-url-loader", 
  22.         options: {
  23.             sourceMap: true
  24.         }
  25.     },
  26.     {
  27.         loader: "less-loader", 
  28.         options: {
  29.             sourceMap: true
  30.         }
  31.     }
  32. ]

参考

[1] Updated README regarding relative filepaths issue #121

云服务器 GPU云服务器 css-modules JS轻松实现CSS设置 混用 -modules

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

转载请注明本文地址：https://www.ucloud.cn/yun/2146.html

相关文章

  • 如何科学的组织React组件样式

    摘要：也可以和预处理器混用目前看下来，它只对名做哈希，也就是说然而这个算是一个有意思的方式，首先它依赖于，而并不局限于的开发，任何前端项目都可以使用，那么就也都可以使用的概念，不知道这个会有怎么样的发展，感觉可以尝试。 React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍...

    jackzou 评论0 收藏0

  • Webpack2 升级指南和特性摘要

    摘要：名称后自动自动补全的功能将被移除在配置时，官方不再允许省略扩展名，的配置写法上将逐步趋于严谨。使用自定义参数作为配置项传入方式将做调整如果你随意将自定义参数通过传入到配置项中，如你会发现这将不会被允许，的执行将会遵循更为严格的标准。 历时多日，webpack2.2正式版终于赶在年前发布了，此次更新相对于1.X版本有了诸多的升级优化改进，笔者也在第一时间查阅了官方的文档，整理和翻译了由w...

    Forelax 评论0 收藏0

  • 从 webpack v1 迁移到 webpack v2 新特性

    摘要：名称后自动自动补全的功能将被移除在配置时，官方不再允许省略扩展名，的配置写法上将逐步趋于严谨。使用自定义参数作为配置项传入方式将做调整如果你随意将自定义参数通过传入到配置项中，如你会发现这将不会被允许，的执行将会遵循更为严格的标准。 从 webpack v1 迁移到 webpack v2 新特性 欢迎小伙伴们为 前端导航平台 点star github仓库： https://githu...

    khlbat 评论0 收藏0

  • 前端模块化和构建工具

    摘要：以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。强大的设计使得它更像是一个构建平台，而不只是一个打包工具。 以前一直对前端构建工具的理解不深，经过几天的研究特意来总结一下，第一次写博客，有写错的请多多见谅，该文章我也从其他博客拷了一些内容，如果有冒犯之处，请指出。 如今，网页不再...

    ad6623 评论0 收藏0

发表评论

登陆后可评论

0条评论

LiuZh

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<