每日一译系列-模块化css怎么玩(译文)
2021-04-18 05:29
标签：tag log develop 转换 word 文件的 from join line 原文链接：How Css Modules Work 原文作者是Preact的作者 这是一篇关于如何使用Css Modules的快速介绍，使用到的工具是Webpack吊炸的css-loader 首先，我们明确一下本文的目标。我们想要和我们的组件一起使用css，因为在某种程度上他们已经耦合在一起了。我今天会用 首先，我们来写点less …非常常见的less代码。类名也是很通用的那种，看起来不是很差，但是Css Modules要给每个样式规则都加上命名空间来让规则冲突几乎不可能发生。 为了使用模块化的CSS，我们得引入样式。这个过程会将所有的样式规则从less翻译到css，给所有的类加上命名空间。就像通常的引入一样，css-loader会把样式注入到组件文件中。最重要的一个不同点在于从import返回了一个值，这个值是一个对象，里面存储着本地的css类名和他们的带有命名空间的版本。 如果你想输出这个style，也就是 这是怎么工作的：当你引入less/css/scss文件的时候，它会被当做一个样式文件添加到当前组件（当然啦，这事有css-loader内部处理的）。你的类名会被翻译成本地的带有命名空间的类名。你可以控制这个过程，最常见的方法就是把 总结起来意思就是说当你在你的JSX(或者其他形式的标记语言)中设置了 想让这一切都工作起来，你得告诉css-loader你想使用Css Modules： 如果你想定制引入的本地的名称,你可以提供一个简单的模板字符串给localIdentName选项： 想想看是不是真的这么做？ 每日一译系列-模块化css怎么玩(译文) 标签：tag log develop 转换 word 文件的 from join line 原文地址：https://www.cnblogs.com/lijianming180/p/12284437.htmlless，但是用单纯的css，或者Scss等等也是一样的。文件结构
样式
1
2
3
4
5
6
7
8.foo {
padding: 10px;
header.bar {
color: black;
font-size: 200%;
}
}引入 CSS Modules
1
2
3
4
5
6
7
8
9
10
11
12import style from './style.less';
export default class extends Component {
render() {
return (
大专栏 每日一译系列-模块化css怎么玩(译文)>
etc
div>
);
}
}
console.log(style)，除了把css注入到你的文件之外，import语句会返回 一个存储着类名和本地类名映射的对象。
1
2console.log(style);
{ foo:"foo_foo_abcde", bar:"foo_bar_abcde" }
.class转换成filename_clas_[hash:0:5]。这回让命名空间按照文件名分类，按照hash区分版本,而且还是可读的，因为原始的类名也还在。class={style.foo}实际上你是添加一个本地的类名class="foo_foo_abcde"。
1
2
3
4
5
6
7
8
9
10
11
12module: {
loaders: [
{
test: /.(less|css)$/,
loader: [
'style',
'css?modules&importLoaders=1',
'less'
].join('!')
}
]
}
1
css?modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]