Installation
This one package will let you use css loaders in your projects.
Use npm install webpack-css-loaders
instead of installing all css-loaders separately.
The following dependencies will be installed:
Package name |
---|
css-loader |
style-loader |
url-loader |
file-loader |
webpack |
Configuration
path
module in your webpack.config.js
file
Require the var path = ; moduleexports = //webpack config
Set output folders for images and fonts used in css
The example of folders arrangement:
output: path: path publicPath:'assets/'
Set loaders
Add the loaders to your webpack.config.js
file:
module: rules: test: /\.$/i //to support eg. background-image property loader:"file-loader" query: name:'[name].[ext]' outputPath:'images/' //the images will be emmited to public/assets/images/ folder //the images will be put in the DOM <style> tag as eg. background: url(assets/images/image.png); test: /\.?$/ //to support @font-face rule loader: "url-loader" query: limit:'10000' name:'[name].[ext]' outputPath:'fonts/' //the fonts will be emmited to public/assets/fonts/ folder //the fonts will be put in the DOM <style> tag as eg. @font-face{ src:url(assets/fonts/font.ttf); } test: /\.css$/ loaders: "style-loader""css-loader"
Usage
To put the CSS into the DOM use:
;
or set the entry
property in the webpack.config.js
file:
entry: "some_styles.css" "your-entry-point.js"