css-loader 笔记 (局部、全局样式 webpack 配

作者: 不知道的是 | 来源:发表于2018-07-15 16:40 被阅读0次

没配置 modules 和 localIdentName 时

// webpack.config.dev.js
{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
  },
},

/* ./src/components/Greeting/index.css */
:local(.red) { color: red; }

/*
 * When declaring a local classname you can
 * compose a local class from another local classname.
 * <https://github.com/webpack-contrib/css-loader>
 */
:local(.green) {
  composes: red;
  color: green;
}

:local(.btnGoodbye) {
  composes: bye hi from '../Goodbye/index.css';
  color: crimson;
}

:local(h2) {
  color: chocolate;
}

.blue {
  color: blue;
}

/* styles.css */
.App {
  font-family: sans-serif;
  text-align: center;
}

css-loader without modules localIdentName

配置了 modules 和 localIdentName 时

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 1,
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]',
    camelCase: true //  Export Classnames in CamelCase
  },
},

/* ./src/components/Greeting/index.css */
:local(.red) { color: red; }

/*
 * When declaring a local classname you can
 * compose a local class from another local classname.
 * <https://github.com/webpack-contrib/css-loader>
 */
:local(.green) {
  composes: red;
  color: green;
}

:local(.btnGoodbye) {
  composes: bye hi from '../Goodbye/index.css';
  color: crimson;
}

:local(h2) {
  color: chocolate;
}

/* 全局样式需要 + :global，否则不起作用 */
:global(.blue) {
  color: blue;
}

/* nested */
:local(.about > a:nth-last-child(1)) {
  float: right;
  margin-right: 0;
}

/* styles.css */
:global(.App) {
  font-family: sans-serif;
  text-align: center;
}

css-loader config modules localIdentName

css-loader config modules localIdentName-02.png

camelCase

camelCase-01

camelCase-02

camelCase-03

其它：

/* :local 对“标签选择器”不起作用，标签选择器定义的样式仍旧是全局的 */
:local(ul > li) {
  height: 1.4rem;
  color: #555;
  line-height: 1.4rem;
  text-align: left;
  border-bottom: 1px solid #CCC;
}

codesandbox 不起作用