diff --git a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js index b6834111e6428..53afe80b3d634 100644 --- a/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js +++ b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js @@ -1,6 +1,8 @@ const HtmlWebpackPlugin = require(`html-webpack-plugin`) const ExtractTextPlugin = require(`extract-text-webpack-plugin`) +const extractCmsCss = new ExtractTextPlugin(`cms.css`) + function plugins(stage) { const commonPlugins = [ // Output /admin/index.html @@ -15,7 +17,7 @@ function plugins(stage) { case `develop`: return commonPlugins case `build-javascript`: - return [...commonPlugins, new ExtractTextPlugin(`cms.css`)] + return [...commonPlugins, extractCmsCss] default: return [] } @@ -52,7 +54,7 @@ function module(config, stage) { config.loader(`cms-css`, { test: /\.css$/, include: [/\/node_modules\/netlify-cms\//], - loader: ExtractTextPlugin.extract([`css`]), + loader: extractCmsCss.extract([`css`]), }) return config default: diff --git a/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js index 2c332c6bbbd28..97f6b3b857608 100644 --- a/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/__tests__/gatsby-node.js @@ -1,9 +1,7 @@ describe(`gatsby-plugin-sass`, () => { - jest.mock(`extract-text-webpack-plugin`, () => { - return { - extract(...args) { - return { extractTextCalledWithArgs: args } - }, + jest.mock(`extract-text-webpack-plugin`, () => class { + extract(...args) { + return { extractTextCalledWithArgs: args } } }) @@ -77,7 +75,7 @@ describe(`gatsby-plugin-sass`, () => { const stringified = JSON.stringify(options) it(`modifies webpack config for ${stringified}`, () => { - const config = { loader: jest.fn() } + const config = { loader: jest.fn(), merge: jest.fn() } const modified = modifyWebpackConfig({ config, stage }, options) expect(modified).toBe(config) diff --git a/packages/gatsby-plugin-sass/src/gatsby-node.js b/packages/gatsby-plugin-sass/src/gatsby-node.js index cefd13943f38d..f01261c6740dc 100644 --- a/packages/gatsby-plugin-sass/src/gatsby-node.js +++ b/packages/gatsby-plugin-sass/src/gatsby-node.js @@ -1,6 +1,8 @@ const ExtractTextPlugin = require(`extract-text-webpack-plugin`) const { cssModulesConfig } = require(`gatsby-1-config-css-modules`) +const extractSass = new ExtractTextPlugin(`styles.css`, { allChunks: true }) + exports.modifyWebpackConfig = ({ config, stage }, options) => { const sassFiles = /\.s[ac]ss$/ const sassModulesFiles = /\.module\.s[ac]ss$/ @@ -24,16 +26,21 @@ exports.modifyWebpackConfig = ({ config, stage }, options) => { config.loader(`sass`, { test: sassFiles, exclude: sassModulesFiles, - loader: ExtractTextPlugin.extract([`css?minimize`, sassLoader]), + loader: extractSass.extract([`css?minimize`, sassLoader]), }) config.loader(`sassModules`, { test: sassModulesFiles, - loader: ExtractTextPlugin.extract(`style`, [ + loader: extractSass.extract(`style`, [ cssModulesConfig(stage), sassLoader, ]), }) + + config.merge({ + plugins: [extractSass], + }) + return config } case `develop-html`: @@ -47,11 +54,16 @@ exports.modifyWebpackConfig = ({ config, stage }, options) => { config.loader(`sassModules`, { test: sassModulesFiles, - loader: ExtractTextPlugin.extract(`style`, [ + loader: extractSass.extract(`style`, [ cssModulesConfig(stage), sassLoader, ]), }) + + config.merge({ + plugins: [extractSass], + }) + return config } default: {