scss.md

installation

packages

• node-sass
• sass loader enable to import file .scss
• css loader enable to import file .css
• style loader inserts imported .css and .scss to the web page inside <style> tag
• optional normalize css

webpack config

{
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
}

Example files structure

- styles
    - base
        _base.scss
        _settings.scss
    - components
        _modal.scss
        _buttons.scss
        _container.scss
        _widget.scss
    styles.scss
app.js

How to import

inside styles.scss

@import './base/setings';
@import './base/base';
@import './components/modal';
@import './components/button';
@import './components/container';
@import './components/widget';

inside app.js

import 'normalize.css/normalize.css'; // external packages
import './styles/styles.scss';