11-styling

Step 11 - Styling

Setup

Install webpack loaders (style-loader, css-loader, sass-loader & node-sass) to support importing SCSS files:

npm install --save-dev style-loader css-loader sass-loader node-sass

Update webpack.config.js to use these loaders for *.scss files:

{
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loaders: ['react-hot', 'babel'],
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass'],
                include: path.join(__dirname, 'src')
            }
        ]
    }
}

Install classnames for handling dynamic class name strings:

npm install --save classnames

Tasks

• Add styling to each component by importing a companion .*.scss for each component and adding classNames to appropriate elements within it

Next

Go to Step 12 - Email Form Modal.

Resources

• classnames
• Inline Styles
• CSS Modules: Welcome to the Future
• Sass: Syntactically Awesome Style Sheets
• Using CSS flexible boxes
• style-loader, css-loader, sass-loader & node-sass