CSS Modules & Webpack

css-modules-webpack.md

CSS Modules & Webpack

https://github.com/webpack/css-loader

https://github.com/css-modules/webpack-demo

https://css-modules.github.io/webpack-demo/

https://github.com/webpack-contrib/css-loader

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

https://hacks.mozilla.org/2017/02/using-neutrino-for-modern-javascript-development/

---

http://getbem.com/introduction/

http://www.integralist.co.uk/posts/bem.html#4

http://primercss.io/buttons/

react-css-modules

Seamless mapping of class names to CSS modules inside of React components.

无缝映射类名称到React组件内的CSS模块。

https://github.com/gajus/react-css-modules

https://github.com/gajus/react-css-modules#sass-scss-less-and-other-css-preprocessors

Sass (.scss)

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_

https://cdnjs.com/libraries/normalize

CDN ? No SRI

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css.map

https://cdnjs.com/#q=normalize

Why SRI disappeared?

cdnjs/cdnjs#10833

https://gist.github.com/xgqfrms-GitHub/462dbc5b16ed7c7cb90942ba340d3fe0

https://github.com/gajus/react-css-modules#webpack

Class Composition

.box {
    width: 100px;
    height: 100px;
}

.empty {
    composes: box;
    background: #4CAF50;
}

.full {
    composes: box;
    background: #F44336;
}

===

.empty {
    width: 100px;
    height: 100px;
    background: #4CAF50;
}

.full {
    width: 100px;
    height: 100px;
    background: #F44336;
}

https://github.com/gajus/react-css-modules/issues/218

css-modules/css-modules#218