Webpack for Beginners #5 - CSS Loaders

>> Tutorial Webpack for Beginners

1. What is CSS Loaders

- Use CSS loaders to load in only the styles we needed, into different parts of our application

- CSS becomes much more modular and esiser to manage

* CSS && Style loaders

- 2 different loader - css-loader, style-loader

+ Css loader, load the css into our JS file

+ Style-loader adds our css into the DOM

2. Step by step using

* Install CSS Loaders

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

* create file src/css/introComponent.css

.intro-component{

padding: 20px;

background: maroon;

color: #fff;

font-family: arial;

}

* Configure webpack.config.js

module.exports = {

//define entry point

entry: './src/script-1.js',

//define output point

output: {

path: 'dist',

filename: 'bundle.js'

},

module: {

loaders: [

{

test: /\.js$/,

exclude: /(node_modules)/,

loader: 'babel-loader',

query: {

presets: ['es2015']

}

},

{

test: /\.css$/,

loader: 'style-loader!css-loader'

}

] //loaders

} //module

};

- test: /\.css$/, //just wanted run on .css file

- loader: 'style-loader!css-loader', // which loader we use is style-loader and css-loader

* Running webpack

webpack

>> Soure change on Github  

>> Tutorial Webpack for Beginners

Thank you