diff --git a/lib/builder/webpack/base.config.mjs b/lib/builder/webpack/base.config.mjs index b2110f7def..7746ec6c80 100644 --- a/lib/builder/webpack/base.config.mjs +++ b/lib/builder/webpack/base.config.mjs @@ -1,6 +1,6 @@ import path from 'path' -import ExtractTextPlugin from 'extract-text-webpack-plugin' +import MiniCssExtractPlugin from 'mini-css-extract-plugin' import FriendlyErrorsWebpackPlugin from '@nuxtjs/friendly-errors-webpack-plugin' import TimeFixPlugin from 'time-fix-plugin' import webpack from 'webpack' @@ -163,12 +163,9 @@ export default function webpackBaseConfig({ name, isServer }) { // CSS extraction const extractCSS = this.options.build.extractCSS - // TODO: Temporary disabled in dev mode for fixing source maps - // (We need `source-map` devtool for *.css modules) if (extractCSS && !this.options.dev) { - config.plugins.push(new ExtractTextPlugin(Object.assign({ - filename: this.getFileName('css'), - allChunks: true + config.plugins.push(new MiniCssExtractPlugin(Object.assign({ + filename: this.getFileName('css') }, typeof extractCSS === 'object' ? extractCSS : {}))) } diff --git a/lib/builder/webpack/style-loader.js b/lib/builder/webpack/style-loader.js index 2bbfc771ed..4d78c1378f 100644 --- a/lib/builder/webpack/style-loader.js +++ b/lib/builder/webpack/style-loader.js @@ -1,6 +1,6 @@ import path from 'path' -import ExtractTextPlugin from 'extract-text-webpack-plugin' +import MiniCssExtractPlugin from 'mini-css-extract-plugin' import postcssConfig from './postcss' @@ -15,13 +15,6 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) { ) ) - // Prepare vue-style-loader - // https://github.com/vuejs/vue-style-loader - const vueStyleLoader = { - loader: 'vue-style-loader', - options: { sourceMap } - } - // -- Configure additional loaders -- // style-resources-loader @@ -73,26 +66,23 @@ export default function styleLoader(ext, loaders = [], isVueLoader = false) { }) // -- With extractCSS -- - // TODO: Temporary disabled in dev mode for fixing source maps - // (We need `source-map` devtool for *.css modules) - if (this.options.build.extractCSS && !this.options.dev) { - // ExtractTextPlugin - // https://github.com/webpack-contrib/extract-text-webpack-plugin - const extractLoader = ExtractTextPlugin.extract({ - use: loaders, - fallback: vueStyleLoader - }) - - // css-hot-loader - // https://github.com/shepherdwind/css-hot-loader - const hotLoader = { - loader: 'css-hot-loader', - options: { sourceMap } + if (this.options.build.extractCSS) { + loaders.unshift(MiniCssExtractPlugin.loader) + if (this.options.dev) { + // css-hot-loader + // https://github.com/shepherdwind/css-hot-loader + loaders.unshift({ + loader: 'css-hot-loader', + options: { sourceMap } + }) } - - return this.options.dev ? [hotLoader].concat(extractLoader) : extractLoader + } else { + // Prepare vue-style-loader + // https://github.com/vuejs/vue-style-loader + loaders.unshift({ + loader: 'vue-style-loader', + options: { sourceMap } + }) } - - // -- Without extractCSS -- - return [vueStyleLoader].concat(loaders) + return loaders } diff --git a/lib/builder/webpack/vue-loader.mjs b/lib/builder/webpack/vue-loader.mjs index f426c7df17..de9a864bd8 100644 --- a/lib/builder/webpack/vue-loader.mjs +++ b/lib/builder/webpack/vue-loader.mjs @@ -5,7 +5,6 @@ export default function vueLoader({ isServer }) { // https://vue-loader.vuejs.org/en const config = { postcss: postcssConfig.call(this), - extractCSS: !!this.options.build.extractCSS, cssSourceMap: this.options.build.cssSourceMap, preserveWhitespace: false, loaders: { diff --git a/lib/common/nuxt.config.js b/lib/common/nuxt.config.js index 831d8b39b6..c185486d34 100644 --- a/lib/common/nuxt.config.js +++ b/lib/common/nuxt.config.js @@ -39,7 +39,9 @@ export default { filenames: { app: '[name].[chunkhash].js', chunk: '[name].[chunkhash].js', - css: '[name].[contenthash].css' + // TODO: Use [name].[contenthash].css when webpack core supports [contenthash] + // https://github.com/webpack-contrib/mini-css-extract-plugin/pull/30#issuecomment-374700690 + css: '[name].[chunkhash].css' }, styleResources: {}, plugins: [], diff --git a/package.json b/package.json index 195d04b22c..9333b92853 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,6 @@ "es6-promise": "^4.2.4", "esm": "^3.0.7", "etag": "^1.8.1", - "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^1.1.11", "fresh": "^0.5.2", "fs-extra": "^5.0.0", @@ -85,6 +84,7 @@ "lodash": "^4.17.5", "lru-cache": "^4.1.2", "memory-fs": "^0.4.1", + "mini-css-extract-plugin": "^0.2.0", "minimist": "^1.2.0", "opencollective": "^1.0.3", "ora": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index f76e80b90a..2557a875bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -385,7 +385,7 @@ async@^1.4.0: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" -async@^2.1.4, async@^2.4.1: +async@^2.1.4: version "2.6.0" resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4" dependencies: @@ -2686,15 +2686,6 @@ extglob@^2.0.4: snapdragon "^0.8.1" to-regex "^3.0.1" -extract-text-webpack-plugin@^4.0.0-beta.0: - version "4.0.0-beta.0" - resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz#f7361d7ff430b42961f8d1321ba8c1757b5d4c42" - dependencies: - async "^2.4.1" - loader-utils "^1.1.0" - schema-utils "^0.4.5" - webpack-sources "^1.1.0" - extract-zip@^1.6.5: version "1.6.6" resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.6.tgz#1290ede8d20d0872b429fd3f351ca128ec5ef85c" @@ -4611,6 +4602,13 @@ mimic-fn@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022" +mini-css-extract-plugin@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.2.0.tgz#7a16b0e1096c86de8e4d1c3b063aa1aeae88d41d" + dependencies: + loader-utils "^1.1.0" + webpack-sources "^1.1.0" + minimalistic-assert@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"