This is a fork based on vue-style-loader. Similar to vue-style-loader, you can chain it after css-loader to dynamically inject CSS into the document as style tags.
-
manualInject (3.1.0+):
Type:
boolean. When importing the style from a js file, by default the style is injected as a side effect of the import. WhenmanualInjectis true, the imported style object exposes a__inject__method, which can then be called manually at appropriate timing. If called on the server, the method expects one argument which is thessrContextto attach styles to.import React from 'react' import styles from 'styles.scss' export default class App extends React.PureComponent { componentWillMount() { if (styles.__inject__) { styles.__inject__(this.props.staticContext) // staticContext from react-router on server } } render() { return <div class={styles.heading}>Hello World</div> } }
-
ssrId (3.1.0+):
Type:
boolean. Adddata-react-ssr-idattribute to injected<style>tags even when not in Node.js. This can be used with pre-rendering (instead of SSR) to avoid duplicate style injection on hydration.
When bundling with target: 'node', the styles in all rendered components are collected and exposed on the React render context object as context.styles, which you can simply inline into your markup's <head>. If you are building a React SSR app, you probably should use this loader for CSS imported from JavaScript files too.
To use react-style-loader to collect all styles on server, you need to separate loading global styles and async component styles, because we need to collect them through componentWillMount lifecycle on runtime, so you need add a option react: true to this loader for async component styles, then you will be able to use styles.__inject__(userContext) on server side.
import webpack from 'webpack'
import ExtractTextWebpackPlugin from 'extract-text-webpack-plugin'
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
import TerserWebpackPlugin from 'terser-webpack-plugin'
import { NODE_ENV, __DEV__, resolve } from './config'
const sourceMap = __DEV__
const minimize = !sourceMap
const cssLoaders = modules =>
ExtractTextWebpackPlugin.extract({
fallback: {
loader: 'react-style-loader',
options: {
react: modules,
},
},
use: [
{
loader: 'css-loader',
options: {
minimize,
sourceMap,
modules,
camelCase: true,
importLoaders: 2,
localIdentName: __DEV__
? '[path][name]__[local]--[hash:base64:5]'
: '[hash:base64:5]',
},
},
{
loader: 'postcss-loader',
options: {
minimize,
sourceMap,
},
},
{
loader: 'sass-loader',
options: {
minimize,
sourceMap,
includePaths: [resolve('node_modules/bootstrap/scss')],
},
},
],
})
export default {
devtool: __DEV__ && 'cheap-module-source-map',
resolve: {
extensions: ['.js', '.scss'],
modules: [resolve('src'), 'node_modules'],
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
cacheDirectory: true,
},
},
{
test: /\.pug$/,
use: [
'apply-loader',
{
loader: 'pug-loader',
options: {
pretty: __DEV__,
},
},
],
},
{
test: /\.scss$/,
oneOf: [
{
test: /bootstrap.scss/,
use: cssLoaders(),
},
{
test: /./,
use: cssLoaders(true),
},
],
},
],
},
plugins: [
new ExtractTextWebpackPlugin({
disable: __DEV__,
filename: '[name].[contenthash].css',
}),
new FriendlyErrorsWebpackPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
__DEV__,
}),
...(__DEV__
? [new webpack.NamedModulesPlugin(), new webpack.NamedChunksPlugin()]
: [
new TerserWebpackPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
]),
],
}-
Does not support url mode and reference counting mode. Also removed
singletonandinsertAtquery options. It always automatically pick the style insertion mechanism that makes most sense. If you need these capabilities you should probably use the originalstyle-loaderinstead. -
Fixed the issue that root-relative URLs are interpreted against chrome:// urls and make source map URLs work for injected
<style>tags in Chrome.
MIT
