相当长一段时间 CSS 总是在页面上作为一个全局的存在,以前这个『特性』影响还不算很大,命名上注意一点,比如使用 BEM 也能一定程度上解决问题。
但是随着 web 组件化的需求越来越强烈,CSS 的这种特性开始成为束缚开发者自由飞翔的绳索,每一个 CSS 类名都有可能产生意想不到的冲突,或者被各个组件覆盖来覆盖去,每当修改一个组件时,我们必须谨小慎微,注意是否会在全局环境下产生冲突。
更严重的是,组件化的背景下,JS + 模板 + CSS 才能称为一个完整的组件,每个组件如果单独引用一个 CSS 文件,你只能通过约束类命名来规避不同组件间可能产生的冲突。同时由于 CSS 的全局性,组件的样式可能会互相影响,这完全打破了组件的低耦合高内聚原则。
当然,CSS 并不能算编程语言,不过是一款 DSL,本来我们不能要求它那么多,但是不甘心的程序员们想出了各种方法让 CSS 更像编程语言,从 SASS、Less 到现在有点火的 CSS in JS 都是为了解决这个问题。
而 CSS Modules 的解决思路有所不同,它在编写 CSS 的时候加入了局部作用域/全局作用域的概念。
CSS Module 的规则非常简单,所有你不指明是全局作用域的都会当初局部作用域来处理。
这里以 SASS 为例,比如你写一段:
.title {
height: 80px;
line-height: 80px;
font-size: 24px;
color: #0a95bf;
}
出来的样式是:
.title_1hf8_ {
height: 80px;
line-height: 80px;
font-size: 24px;
color: #0a95bf
}
title
变成了 title_1hf8_
你大概猜到了,CSS Module 实现局部作用域的方法是把类通过一定规则做个编码。
组件中引用是这样的:
import * as Style from './index.scss';
这样就可以在模板中使用了:
<div v-bind:class="Sytles.title">MD Converter</div>
出来的 html 就是:
<div class="title_1hf8_">MD Converter</div>
这里用的是 TypeScript 和 Vue ,其它地方用法也差不多。
『局部作用域』有了,下面是全局作用域:
:global {
.output {
background: #fff;
height: 100%;
min-height: 100%;
padding: 1em;
word-break: break-all;
}
}
把你想作为全局作用域的东西用 :global{}
包起来就可以了。
一般用 CSS Module 使用 Webpack 的 css-loader 即可,这里因为用的是 TypeScript,会有点不一样。
先来个完整的 Webpack 配置文件:
var path = require('path');
var webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
//页面入口文件配置
entry: {
"index.entry": __dirname + '/src/js/index.entry.js',
},
//入口文件输出配置
output: {
filename: '[name].js',
chunkFilename: "[name].chunk.js",
},
externals: {
"vue": "Vue",
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {warnings: false},
output: {comments: false},
sourceMap: true
})
],
module: {
rules: [
{
test: /\.html$/,
loader: 'text-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
use: [
{
loader: 'typings-for-css-modules-loader',
options: {
modules: true,
namedExport: true,
camelCase: true,
minimize: true,
localIdentName: "[local]_[hash:base64:5]"
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
})
},
],
},
plugins: [
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('../css/[name].css').replace('css/js','css');
},
allChunks: true
}),
]
};
这里主要用到三个 Loader,分别是 sass-loader,typings-for-css-modules-loader 和 style-loader。
如果不是 TypeScript 把 typings-for-css-modules-loader 换成 css-loader,稍微改下配置即可。
启用 CSS Module 很简单,就一句话 modules: true,
然后下面有个选项 localIdentName: "[local]_[hash:base64:5]"
是用来指定生成类名的规则的,title_1hf8_
就是根据这个规则来的,你也可以弄得复杂点,比如 [path][name]__[local]--[hash:base64:5]
简单解释下三个 Loader 的作用:
<style>
标签打到页面上。整个过程就是,读到一个 SCSS 文件,丢给 sass-loader 处理成 css,然后给 typings-for-css-modules-loader 生成 xxx.scss.d.ts 文件并且把 css 处理成 JavaScript 可以使用的样子(这步其实是 css-loader 在处理,为啥要把 css 文件处理成 JavaScript 可以用的样子呢,因为 webpack 只能处理 JavaScript,所以需要做转换),最后把处理好的给 style-loader,页面加载的时候就会打到页面上。
其实 loader 的本质就是 anything to JavaScript,因为 Webpack 只处理 JavaScript。记住这一点,就对为什么要用这个 loader 那个 loader 有个清晰的认识了。
在用 TypeScript 写 Vue 组件的时候,定义组件时,可以 require 一个 html 作为 template:
@Component({
template: require('./index.html'),
})
为啥可以 require html 文件呢,因为上面的 webpack 配置中有这句:
{
test: /\.html$/,
loader: 'text-loader'
},
把 html 文件用 text-loader
处理了,把 require html 变成一段 text,利用 Webpack 模板和代码优雅分离。
除此之外,CSS Modules 还有定义变量,继承别的类,import 其它模块等特性,不过这些 SASS 大多也有。
最后上一个简单的例子,TypeScript + Vue 的 Markdown 简单编辑器。
demo 代码地址: https://github.com/bob-chen/md
http://www.ruanyifeng.com/blog/2016/06/css_modules.html
https://github.com/camsong/blog/issues/5
我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3e7zfmubrl44s