css模块化配置---webpack4+less

目的

局部组件引入局部css样式,实现css模块化开发; 减免全局污染

操作

启用css modules
```
{loader: 'css-loader',options: {modules: true,localIdentName: '[local]___[hash:base64:5]'}
}
复制代码
```
modules: true,启用模块化

localIdentName: '[local]___[hash:base64:5]',按照给定算法所生成的样式类名.有效避免类名重复
使用css modules

局部模式--:local

/* index.less */
.divContainer {                              :local(.divContainer) {background: #fff;       等价于                background: #fff;
}                                             }/* xx.jsx*/
import styles from './index.less';  // 引入局部less文件
<div className={styles.divContainer}>...</div>  // 将类名绑定在元素上/*最后生成文件中对应的样式类名*/
<div class="divContainer___34Uoz">... </div>
复制代码

全局模式--:global

:global {.divContainer {                            :global(.divContainer) {background: #fff;      等价于                  background: #fff;}                                          }
}
复制代码

注意事项

避免转换引入插件中的css样式

{
/*webpack.config.js*/// 对于node_modules文件夹以外的less文件, 开启css module模式test: /\.less?$/,exclude: /node_modules/,use: [MiniCssExtractPlugin.loader, {loader: 'css-loader',options: {modules: true,localIdentName: '[local]___[hash:base64:5]'}}, 'postcss-loader', {loader: 'less-loader',options: {modifyVars: theme}}]
},// 对于node_modules中的less文件,不开启css module模式
{test: /\.less?$/,include: /node_modules/,use: [MiniCssExtractPlugin.loader, css-loader, 'postcss-loader',  less-loader']
}复制代码

转载于:https://juejin.im/post/5c45464c6fb9a049ed312dd5

css模块化配置---webpack4+less相关推荐

Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
css模块化及CSS Modules使用详解
什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方 ...
[转载] CSS模块化【封装-继承-多态】
第一次听到"CSS模块化"这个词是在WebReBuild的第四届"重构人生"年会上,当时我还想,"哈,CSS也有模块化,我没听错吧?"事实上 ...
spring配置详解-模块化配置
再介绍一个配置,再介绍一下Spring的分模块配置,当然这个配置很简单,我估计一句话就说完了,啥叫分模块配置,就是将来随着项目的开发,对象越来越多,把很多对象都放在一个文件里面,这个太多了,于是我们在 ...
CSS模块化方案分类
CSS模块化方案分类: 1.命名约定规范化CSS的解决方案如:BEM.OOCSS.AMCSS.SMACSS 2.CSS in JS 彻底抛弃 CSS,用 JavaScript 写 CSS 规则,st ...
Vue 路由模块化配置
博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化分享两个解决方案 -- Vue 路由配置 ...
Bulma CSS - 模块化
目录 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma框架是模块化的,可以按需导 ...
前端开发——模块化（css模块化开发）
掌握模块化开发的思想是我们进行模块化开发的基础.他有以下几部分组成: 1.css模块化 2.html模块化 3.js模块化模块化开发的优势 1.更好的组织和维护代码 2.按需加载 3.避免命名冲突 ...
模块化设计html,从空格谈起--关于CSS模块化设计
以下是引用片段: td .b { color:#00ff00; } th.b { color:#ff0000; font-family:黑体; font-size:20px; } .b { color ...
CSS模块化基本思想
模块化的基本概念 1.什么是模块模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程. 模块化用来分割,组织和打包软件.每个模块完成一个特定的子功能,所有的模块按某种方式组装起来,成为 ...

css模块化配置---webpack4+less

目的

操作

css模块化配置---webpack4+less相关推荐

最新文章

热门文章