POC - build UI library from create-react-app with CSS Modules
npm install css-modules-ui-lib-pocThis project was bootstrapped with create-react-app-css-modules.
- It is a POC UI library. Not production ready.
- The components are not fully formed.
- It's essentially a "scaffold" to test CSS Modules + Sass.
You have 2 choices:
- Comment out the following sections in "config\webpack.config.dev.js"
``javascript`
libraryTarget: 'umd'
library: 'uiLibPOC'`javascript`
externals: {
'react': 'commonjs react'
}
- Start server `npm start`.
- Any component changes (e.g. CSS) trigger a re-compilation. Reload browser to see changes.
- You can also view compiled CSS at http://localhost:3000/static/css/main.css
- Comment out the same sections as above in "config\webpack.config.prod.js"
- `npm run build`.`
- Run static server serve -s build`.
- View app at http://localhost:5000
The library has been published to NPM.
- Library has been exported with `npm run lib`.`
- Package name has been defined - e.g. "name": "css-modules-ui-lib-poc"`.`
- Library entry point has been defined - e.g. "main": "lib/index.js"`.
- Each component in "src\lib\components" has an associated ".js", ".scss" and ".json" file.
- Each component is exported as a module in "src\lib\index.js" - e.g. `export { default as Button } from './components/Button';`.
- The notes below are for consuming in another React app.
- We still need to work out how to do the same (with minimal config changes) in other applications? And whether we can link directly to JS and CSS in \build folder? We have configured libraryTarget: 'umd' for this in Webpack config files, but the auto-generated CSS Modules class names may be a problem.
$3
npm i --save babel-cli babel-preset-es2015 babel-preset-react babel-preset-stage-0 classnames node-sass sass-loader$3
1. Require 'ExtractTextPlugin' to generate stylesheet
`javascript
const ExtractTextPlugin = require('extract-text-webpack-plugin');
`2. Add this plugin to plugins array
`javascript
plugins: [
// ... other plugins ...
new ExtractTextPlugin({
filename: 'static/css/[name].css', // Or whatever filepath/name you use in your app
allChunks: true
})
],
`3. Replaced default CSS Modules loader config with...
`javascript
{
test: /\.s|css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
minimize: true,
sourceMap: true,
modules: true,
importLoaders: 2,
localIdentName: '[name]___[local]___[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
}
},
'sass-loader'
]
})
},
`4. Add 'scss' to the exclude array
`javascript
exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/],
`$3
`jsx
import React, { Component } from 'react';
import { Button } from 'css-modules-ui-lib-poc';export default class MyComponent extends Component {
render() {
return (
);
}
}
``