mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
refactor sryle-loader
makes code more clear and (temporary) fixing dev source maps when extractCSS is on
This commit is contained in:
parent
6fabea392d
commit
4e22416002
@ -1,7 +1,6 @@
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const { cloneDeep } = require('lodash')
|
||||
const { join, resolve } = require('path')
|
||||
const webpack = require('webpack')
|
||||
const { isUrl, urlJoin } = require('../../common/utils')
|
||||
const TimeFixPlugin = require('./plugins/timefix')
|
||||
const WarnFixPlugin = require('./plugins/warnfix')
|
||||
@ -116,25 +115,6 @@ module.exports = function webpackBaseConfig({ name, isServer }) {
|
||||
config.plugins.push(new ExtractTextPlugin(extractOptions))
|
||||
}
|
||||
|
||||
// --------------------------------------
|
||||
// Dev specific config
|
||||
// --------------------------------------
|
||||
if (this.options.dev) {
|
||||
//
|
||||
}
|
||||
|
||||
// --------------------------------------
|
||||
// Production specific config
|
||||
// --------------------------------------
|
||||
if (!this.options.dev) {
|
||||
// This is needed in webpack 2 for minify CSS
|
||||
config.plugins.push(
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
// Clone deep avoid leaking config between Client and Server
|
||||
return cloneDeep(config)
|
||||
}
|
||||
|
@ -62,13 +62,6 @@ module.exports = function webpackServerConfig() {
|
||||
}
|
||||
})
|
||||
|
||||
// --------------------------------------
|
||||
// Production specific config
|
||||
// --------------------------------------
|
||||
if (!this.options.dev) {
|
||||
|
||||
}
|
||||
|
||||
// Extend config
|
||||
if (typeof this.options.build.extend === 'function') {
|
||||
const isDev = this.options.dev
|
||||
|
@ -2,75 +2,76 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
|
||||
const { join } = require('path')
|
||||
|
||||
module.exports = function styleLoader(ext, loaders = [], isVueLoader = false) {
|
||||
// Normalize loaders
|
||||
loaders = (Array.isArray(loaders) ? loaders : [loaders]).map(loader => {
|
||||
if (typeof loader === 'string') {
|
||||
loader = { loader }
|
||||
}
|
||||
return Object.assign({
|
||||
options: {
|
||||
sourceMap: this.options.build.cssSourceMap
|
||||
}
|
||||
}, loader)
|
||||
})
|
||||
const sourceMap = Boolean(this.options.build.cssSourceMap)
|
||||
|
||||
// https://github.com/postcss/postcss-loader
|
||||
let postcssLoader
|
||||
if (!isVueLoader && this.options.build.postcss) {
|
||||
postcssLoader = {
|
||||
loader: 'postcss-loader',
|
||||
options: this.options.build.postcss
|
||||
}
|
||||
// Normalize loaders
|
||||
loaders = (Array.isArray(loaders) ? loaders : [loaders])
|
||||
.map(loader => Object.assign({ options: { sourceMap } }, typeof loader === 'string' ? { loader } : loader))
|
||||
|
||||
// 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
|
||||
// https://github.com/yenshih/style-resources-loader
|
||||
if (this.options.build.styleResources) {
|
||||
loaders.push({
|
||||
loader: 'style-resources-loader',
|
||||
options: Object.assign({ sourceMap }, this.options.build.styleResources)
|
||||
})
|
||||
}
|
||||
|
||||
// postcss-loader
|
||||
// vue-loader already provides it's own
|
||||
// https://github.com/postcss/postcss-loader
|
||||
if (!isVueLoader && this.options.build.postcss) {
|
||||
loaders.unshift({
|
||||
loader: 'postcss-loader',
|
||||
options: Object.assign({ sourceMap }, this.options.build.postcss)
|
||||
})
|
||||
}
|
||||
|
||||
// css-loader
|
||||
// https://github.com/webpack-contrib/css-loader
|
||||
const cssLoader = {
|
||||
loaders.unshift({
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
minimize: true,
|
||||
importLoaders: 1,
|
||||
sourceMap: this.options.build.cssSourceMap,
|
||||
sourceMap,
|
||||
minimize: !this.options.dev,
|
||||
importLoaders: loaders.length, // Important!
|
||||
alias: {
|
||||
'/static': join(this.options.srcDir, 'static'),
|
||||
'/assets': join(this.options.srcDir, 'assets')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// https://github.com/vuejs/vue-style-loader
|
||||
const vueStyleLoader = {
|
||||
loader: 'vue-style-loader',
|
||||
options: {
|
||||
sourceMap: this.options.build.cssSourceMap
|
||||
}
|
||||
}
|
||||
|
||||
if (this.options.build.extractCSS) {
|
||||
const extraction = ExtractTextPlugin.extract({
|
||||
fallback: vueStyleLoader,
|
||||
use: [
|
||||
cssLoader,
|
||||
postcssLoader,
|
||||
...loaders
|
||||
].filter(l => l)
|
||||
// -- 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
|
||||
})
|
||||
return this.options.dev ? ['css-hot-loader'].concat(extraction) : extraction
|
||||
}
|
||||
|
||||
// https://github.com/yenshih/style-resources-loader
|
||||
let styleResourcesLoader
|
||||
if (this.options.build.styleResources) {
|
||||
styleResourcesLoader = {
|
||||
loader: 'style-resources-loader',
|
||||
options: this.options.build.styleResources
|
||||
// css-hot-loader
|
||||
// https://github.com/shepherdwind/css-hot-loader
|
||||
const hotLoader = {
|
||||
loader: 'css-hot-loader',
|
||||
options: { sourceMap }
|
||||
}
|
||||
|
||||
return this.options.dev ? [ hotLoader ].concat(extractLoader) : extractLoader
|
||||
}
|
||||
|
||||
return [
|
||||
vueStyleLoader,
|
||||
cssLoader,
|
||||
postcssLoader,
|
||||
...loaders,
|
||||
styleResourcesLoader
|
||||
].filter(l => l)
|
||||
// -- Without extractCSS --
|
||||
return [ vueStyleLoader ].concat(loaders)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user