1.0.0 • Published 7 years ago
webpack-sass-loaders v1.0.0
Installation
This one package will let you use sass loaders in your projects.
Use npm install webpack-sass-loaders instead of installing all css-loaders and sass-loaders separately.
The following dependencies will be installed:
| Package name |
|---|
| css-loader |
| style-loader |
| node-sass |
| sass-loader |
| url-loader |
| file-loader |
| webpack |
Configuration
Require the path module in your webpack.config.js file
var path = require('path');
module.exports = {
//webpack config
}Set output folders for images and fonts used in scss
The example of folders arrangement:
output:{
path: path.join(__dirname,'public/assets/'),
publicPath:'assets/'
},Set loaders
Add the loaders to your webpack.config.js file:
module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/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: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, //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: /\.scss$/,
loaders: ["style-loader","css-loader","sass-loader"]
}
]
}Usage
To put the CSS into the DOM use:
require("some_styles.scss");or set the entry property in the webpack.config.js file:
entry: [
"some_styles.scss",
"your-entry-point"
]