compile-string-loader
compile-string-loader module for Webpack.
Usage
Compile and expose a string. Very handy for CSS in JS.
Getting Started
To begin, you'll need to install compile-string-loader
:
$ yarn add compile-string-loader --dev
Inline
// App.js;
Config
// webpack.config.js module: rules: test: /\.css\.js$/ use: 'style-loader' loader: 'css-loader' options: modules: true 'compile-string-loader' 'babel-loader'
Example
// colors.jsconst red = '#ff0000';const white = '#ffffff';
// app.css.js; ` .myElement { background-color: ; color: ; width: 100%; }`;
// App.js; const container = document; containerclassList;
// webpack.config.js module: rules: test: /\.css\.js$/ use: 'style-loader' loader: 'css-loader' options: modules: true 'compile-string-loader' 'babel-loader'
Miscellaneous
compile-string-loader remains a loader. So if you were to write postcss, you might just wanna add a postcss-loader accordingly.
// app.css.js; // using postcss-nested ` .myElement { background-color: ; color: ; width: 100%; div { width: 50%; } }`;
// webpack.config.js module: rules: test: /\.css\.js$/ use: 'style-loader' loader: 'css-loader' options: modules: true 'postcss-loader' 'compile-string-loader' 'babel-loader'