Extract CSS from SCSS and deferred lazy load into app #105

fillippeyton · 2018-04-20T23:14:12Z

I have a few SCSS theme files I want to extract to CSS files and later load them into the page. I want to be able to use contenthash for long term caching.

Since I'm using Webpack 4, I am using mini-css-extract-plugin. I started down the path of creating a splitChunks in my webpack config.

// webpack.config.js
module.exports = {
  plugins: [
      new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].[contenthash].css",
      chunkFilename: "[id].[contenthash].css"
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        'theme-a': {
            test: /theme-a.\scss/,
        },
        'theme-b': {
            test: /theme-b.\scss/,
        },
        // more themes
      }
    }
  }
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
}

I've then tried dynamically importing the css in my app:

// app.js
class App extends React.Component {
  // constructor

  login(themeName) {
    import(/* webpackChunkName: "`${themeName}`" */ `./path/to/${themeName}.scss`).then(theme => {
      // do something with `theme`
    }
  }
  
  // other stuff
}

I need to be able to load that css file dynamically in login() and I'm just not sure how to reference it when it has a generated [contenthash]. Is there a good way to reference the split css chunks in my app when using mini-css-extract-plugin?

The text was updated successfully, but these errors were encountered:

fillippeyton · 2018-04-21T00:50:17Z

Related issue: #94

fillippeyton · 2018-04-23T18:31:43Z

Also related: webpack-contrib/extract-text-webpack-plugin#455 (comment)

alexander-akait · 2018-05-11T14:24:26Z

@johnelliott how this issue related to your problem? use [contenthash] for long term caching, also writing your problems in other issues without actual/expected/minimum reproducible test repo will not help in solving your problem

alexander-akait · 2018-05-11T14:46:01Z

@fillippeyton sorry i can't help your here, please create new issue with minimum reproducible test repo and what you have and what you expected and description. Why do I ask to do this? Because we have hundreds of requests (issues and PRы) and it takes a lot of time, the more accurately you can formulate the problem and demonstrate it using a small configuration, the sooner your problem will be solved or you can start investigating problem yourself and send us PR

fillippeyton · 2018-05-14T06:21:50Z

@johnelliott The solution I've come up with is using extract-text-webpack-plugin and creating a "theme manifest" injected into my HtmlWebpackPlugin template. I then reference that on login() and inject a "theme" link into the <head> like <link href="theme-a.css" />. Here's my related SO post: https://stackoverflow.com/a/49993381/401393

I would love to dynamically import these via a named import or some way that feels less hacky.

alexander-akait · 2018-05-14T11:08:11Z

@fillippeyton can we close issue?

johnelliott · 2018-05-14T22:09:03Z

@fillippeyton my solution was to use the extract-loader and file-loader after the css-loader. From there I would conditionally emit the file on the client or server webpack config and have the output file name be the content hash. This would allow me to import the file name on disk in both server and client.

Then in the client when the webpack mode is development I would use the style-loader instead of the extract-loader and file-loader chain.

I realize it’s a bit difficult to describe some of these configurations without some code to look at. :/

fillippeyton · 2018-05-17T05:04:32Z

Appreciate the effort looking into this @johnelliott ! I'll take a swing at that solution when I have some time.

danburzo · 2018-08-21T09:35:42Z

@johnelliott thank you for the idea! Would you be able to share your setup? I'm looking into doing something similar, and would greatly appreciate it.

johnelliott · 2018-08-21T14:58:22Z

@danburzo I’m working until 6pm EST but I’ll follow up. Gotta find the branch too :p

danburzo · 2018-08-24T19:14:48Z

Thank you @johnelliott for the idea! I was able to adapt it to suit our needs, like below. (It actually ended up not using mini-css-extract-plugin).

webpack.config.js

module: {
  rules: {
	// Font stylesheets
	{
		test: /\.css$/,
		use: [
			{
				loader: 'file-loader',
				options: {
					name: config.local ? 'css/[name].[ext]' : 'css/[hash].[ext]'
				}
			},
			'extract-loader',
			'css-loader',
			'postcss-loader'
		],
		include: [/fonts/]
	},

	// Font files
	{
		test: /\.(woff|woff2|ttf|otf)$/,
		loader: 'file-loader',
		include: [/fonts/],

		// awkward path config to make everything work
		// See: https://github.com/webpack-contrib/file-loader/issues/261
		options: {
			name: config.local ? '[name].[ext]' : '[hash].[ext]',
			outputPath: 'css/',
			publicPath: '../css/'
		}
	},
  }
}

With this setup:

postcss-loader > css-loader > extract-loader > file-loader

I am able to have individual, content-hashed CSS files whose URLs I can obtain in the JS code with require('fonts/somefont/style.css'), and the files themselves are plain CSS.

johnelliott · 2018-08-24T20:57:29Z

Good to hear Dan :)

michael-ciniawsky closed this as completed Aug 24, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extract CSS from SCSS and deferred lazy load into app #105

Extract CSS from SCSS and deferred lazy load into app #105

fillippeyton commented Apr 20, 2018 •

edited

Loading

fillippeyton commented Apr 21, 2018

fillippeyton commented Apr 23, 2018

alexander-akait commented May 11, 2018 •

edited

Loading

alexander-akait commented May 11, 2018 •

edited

Loading

fillippeyton commented May 14, 2018

alexander-akait commented May 14, 2018

johnelliott commented May 14, 2018 •

edited

Loading

fillippeyton commented May 17, 2018

danburzo commented Aug 21, 2018

johnelliott commented Aug 21, 2018

danburzo commented Aug 24, 2018 •

edited

Loading

johnelliott commented Aug 24, 2018

Extract CSS from SCSS and deferred lazy load into app #105

Extract CSS from SCSS and deferred lazy load into app #105

Comments

fillippeyton commented Apr 20, 2018 • edited Loading

fillippeyton commented Apr 21, 2018

fillippeyton commented Apr 23, 2018

alexander-akait commented May 11, 2018 • edited Loading

alexander-akait commented May 11, 2018 • edited Loading

fillippeyton commented May 14, 2018

alexander-akait commented May 14, 2018

johnelliott commented May 14, 2018 • edited Loading

fillippeyton commented May 17, 2018

danburzo commented Aug 21, 2018

johnelliott commented Aug 21, 2018

danburzo commented Aug 24, 2018 • edited Loading

johnelliott commented Aug 24, 2018

fillippeyton commented Apr 20, 2018 •

edited

Loading

alexander-akait commented May 11, 2018 •

edited

Loading

alexander-akait commented May 11, 2018 •

edited

Loading

johnelliott commented May 14, 2018 •

edited

Loading

danburzo commented Aug 24, 2018 •

edited

Loading