With NPM v7+:
$ npm i rcs-webpack-plugin -D
With prior NPM versions:
$ npm i rcs-webpack-plugin rcs-core rename-css-selectors -D
import rcs from 'rcs-core'; // just import this if you want to change the options on the core directly
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import RcsWebpackPlugin from 'rcs-webpack-plugin';
// following methods also allow array of strings and RegExp
rcs.selectorLibrary.setExclude('my-selector'); // if you want to exclude a specific selector
rcs.selectorLibrary.set('my-custom-selector'); // if you want to include custom selectors which are not in css files
// check out github.com/JPeer264/node-rcs-core/blob/7e3ebb872964f49bf82c84f6920005610a3d252a/docs/api for more information
export default {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
'css-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin(),
new RcsWebpackPlugin(),
],
};
fillLibraries
is to wether or not rcs should get prefilled with selectors. Turning off is usefull if you used postcss-rcs or plain rcs-core.
Default: true
fillLibrariesOptions
just applies if { fillLibraries: true }
. These options are the same as rcs-core@fillLibraries
espreeOptions
are mainly for the JS parsing. These options are the same as rcs-core@replaceJs
If you use handlebars and have variables in your JavaScript for dynamic content creation
Default: false
MIT © Jan Peer Stöcklmair