npm install style-block-loader --save-dev
var home_style = require("style-block!./src/pages/home.html")
// => returns raw css code from the first style block of html file
This is an example of a webpack configuration that uses the style-block loader in conjucntion with css-loader and less-loader.
module.exports = {
module: {
loaders: [
...
{ test: /\.html$/, loader: "css?minimize!less!style-block" },
...
]
}
};
The less filter allows lo load only style script with "stylesheet/less" as rel attribute values. for example an HTML page with this style block.
<style tyle="text/css" rel="stylesheet/less">
/** less code */
</style>
is compiled with this webpack configuration.
"css?minimize!less!style-block?filter=less"
Another common use of style-block-loader is with the extract-text-webpack-plugin like this.
var path = require("path");
var glob = require("glob");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractStyle = new ExtractTextPlugin("[name].styles.css");
var extractLESS = new ExtractTextPlugin("[name].less.css");
var extractCSS = new ExtractTextPlugin("[name].sheets.css");
var entries = []
.concat(glob.sync(__dirname+"/index.js"))
.concat(glob.sync(__dirname+"/src/**/*.js"))
.concat(glob.sync(__dirname+"/src/**/*.html"))
.concat(glob.sync(__dirname+"/src/**/*.css"))
.concat(glob.sync(__dirname+"/src/**/*.less"))
;
module.exports = {
entry: entries,
output: {
path: path.join(__dirname, "dist"),
filename: '[name].build.js'
},
module: {
loaders: [
{ test: /\.html$/, loader: extractStyle.extract("raw", "css?minimize!less!style-block") },
{ test: /\.css$/, loader: extractCSS.extract("style", "css?minimize") },
{ test: /\.less$/, loader: extractLESS.extract("style", "css?minimize!less") },
{ test: /\.png$/, loader: "file-loader" }
]
},
plugins: [extractStyle,extractCSS, extractLESS]
}