标签：gpo doc hub write abr prim rms ima world
后面项目地址：https://github.com/947133297/lwj-webpack-demo
关键是打开这一行，表示开启loader的css module功能：
{ test: /\.css$/, loader: ‘style-loader!css-loader?modules‘ },
border.css
body {
border: 10px solid darkmagenta;
}
.qwe{
border: 10px solid black;
}
#eee{
border: 10px solid green;
}
.outer .inner{
border: 10px solid red;
}
app.css
body {
background-color: blue;
}
:global(.qwe){
font-size: 40px;
}
#eee{
color: aqua;
}
.outer .inner{
font-weight: 900;
}
入口js文件
require(‘./app.css‘);
var other1 = require(‘./border.css‘);
// Cannot read property ‘inner‘ of undefined
// var html1 = ‘<div class="‘+other1.outer.inner+‘">other1</div>‘;
var html1 = ‘<div class="‘+other1.outer+‘"><div class="‘+other1.inner+‘">border test1</div></div>‘;
var html2 = ‘<div class="‘+other1.qwe+‘">border test2</div>‘;
var html3 = ‘<div id=‘+other1.eee+‘>border test id</div>‘;
document.write(html1);
document.write(html2);
document.write(html3);
打包后的文件中有两段这样的代码：
exports.locals = {
"eee": "_3omJ4gpO6T45EFo0ZOMzz3",
"outer": "_2R2TiJtwoE2Ka6dR0UXOk1",
"inner": "_2Zm3l9VFNoYdhD18zUhAsL"
};
//...
exports.locals = {
"qwe": "qhJc-oYXMZ34_XRr59Qtz",
"eee": "_2EWJ0p0M9i7zNLMpM4YhOW",
"outer": "_1wB3wnxbesTSl4WbD-h9aP",
"inner": "_136k_jaRt4SbXZzJIe6J6O"
};
运行效果：
<style type="text/css">
body {
background-color: blue;
}
.qwe{
font-size: 40px;
}
#_3omJ4gpO6T45EFo0ZOMzz3{
color: aqua;
}
._2R2TiJtwoE2Ka6dR0UXOk1 ._2Zm3l9VFNoYdhD18zUhAsL{
font-weight: 900;
}
</style>
<style type="text/css">
body {
border: 10px solid darkmagenta;
}
.qhJc-oYXMZ34_XRr59Qtz{
border: 10px solid black;
}
#_2EWJ0p0M9i7zNLMpM4YhOW{
border: 10px solid green;
}
._1wB3wnxbesTSl4WbD-h9aP ._136k_jaRt4SbXZzJIe6J6O{
border: 10px solid red;
}
</style>
<body>
<div class="_1wB3wnxbesTSl4WbD-h9aP">
<div class="_136k_jaRt4SbXZzJIe6J6O">border test1</div>
</div><div class="qhJc-oYXMZ34_XRr59Qtz">border test2</div>
<div id="_2EWJ0p0M9i7zNLMpM4YhOW">border test id</div>
<h1>Hello World</h1>
<span class="qwe">3333</span>
<span id="eee">4444</span>
<div class="outer">
<div class="inner">
bold
</div>
</div>
</body>
结论：
dep.css
.depclass{
color: darkmagenta;
}
combine.css
.red{
background-color: red;
}
.content{
composes: red;
composes: depclass from ‘./dep.css‘;
border: 2px solid #000;
}
入口文件添加如下代码：
var c = require(‘./combine.css‘);
var html4 = ‘<div class="‘+c.content+‘">compose test</div>‘;
document.write(html4);
bundle.js有如下两段代码：
exports.locals = {
"depclass": "_3o2XDTxGMaBRvs2mRiV1es"
};
//...
exports.locals = {
"red": "_1KvM5G6-rmsDcUM_AatNkH",
"content": "_3oH95_iAzM0qUNDaF3GCxv _1KvM5G6-rmsDcUM_AatNkH " + __webpack_require__(2).locals["depclass"] + ""
};
运行结果
<style type="text/css">
._1KvM5G6-rmsDcUM_AatNkH{
background-color: red;
}
._3oH95_iAzM0qUNDaF3GCxv{
border: 2px solid #000;
}
</style>
<style type="text/css">
._3o2XDTxGMaBRvs2mRiV1es{
color: darkmagenta;
}
</style>
<div class="_3oH95_iAzM0qUNDaF3GCxv _1KvM5G6-rmsDcUM_AatNkH _3o2XDTxGMaBRvs2mRiV1es">compose test</div>
结论：
修改配置文件如下：
loaders:[
{ test: /\.s?css$/, loader: ‘style-loader!css-loader?modules!sass-loader‘ },
]
1.scss:
$primaryColor: #333;
.s1{
background: $primaryColor;
composes: s1 from ‘./2.scss‘;
}
2.scss:
$borderColor: red;
.s1{
border: 1px solid $borderColor;
}
入口文件：
var s = require(‘./scss/1.scss‘);
var html5 = ‘<div class="‘+s.s1+‘">scss test</div>‘;
document.write(html5);
打包：
exports.locals = {
"s1": "_2KqHQfE-Ms43DCsHA7wfbk"
};
exports.locals = {
"s1": "EhwNnMc7oenHygrKydr1t " + __webpack_require__(3).locals["s1"] + ""
};
运行结果：
<style type="text/css">
$borderColor: red;
._2KqHQfE-Ms43DCsHA7wfbk{
border: 1px solid $borderColor;
}
</style>
<style type="text/css">
.EhwNnMc7oenHygrKydr1t {
background: #333;
}
</style>
<div class="EhwNnMc7oenHygrKydr1t _2KqHQfE-Ms43DCsHA7wfbk">scss test</div>
结论：
compose进来的scss，并没有被scss-loader所处理。所以如果要实现相关的引入功能，就只能用scss中的引入语法了。compse仅仅支持css
标签：gpo doc hub write abr prim rms ima world
原文地址：http://www.cnblogs.com/hellohello/p/7625540.html
