diff --git a/lib/builder/builder.js b/lib/builder/builder.js index f073d02ee5..5ccb3cbddd 100644 --- a/lib/builder/builder.js +++ b/lib/builder/builder.js @@ -9,15 +9,13 @@ const { join, resolve, basename, extname, dirname } = require('path') const MFS = require('memory-fs') const webpackDevMiddleware = require('webpack-dev-middleware') const webpackHotMiddleware = require('webpack-hot-middleware') -const { r, wp, wChunk, createRoutes, sequence, relativeTo, waitFor, rmCache } = require('../common/utils') const Debug = require('debug') const Glob = require('glob') +const { r, wp, wChunk, createRoutes, sequence, relativeTo, waitFor, rmCache } = require('../common/utils') +const { Options } = require('../common') const clientWebpackConfig = require('./webpack/client.config.js') const serverWebpackConfig = require('./webpack/server.config.js') const dllWebpackConfig = require('./webpack/dll.config.js') -const vueLoaderConfig = require('./webpack/vue-loader.config') -const styleLoader = require('./webpack/style-loader') -const { Options } = require('../common') const debug = Debug('nuxt:build') debug.color = 2 // Force green color @@ -44,10 +42,6 @@ module.exports = class Builder { // Helper to resolve build paths this.relativeToBuild = (...args) => relativeTo(this.options.buildDir, ...args) - // Bind styleLoader and vueLoader - this.styleLoader = styleLoader.bind(this) - this.vueLoader = vueLoaderConfig.bind(this) - this._buildStatus = STATUS.INITIAL // Stop watching on nuxt.close() diff --git a/lib/builder/webpack/base.config.js b/lib/builder/webpack/base.config.js index ffb458bbdf..61ad371b1d 100644 --- a/lib/builder/webpack/base.config.js +++ b/lib/builder/webpack/base.config.js @@ -2,6 +2,8 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin') const { cloneDeep } = require('lodash') const { join, resolve } = require('path') const { isUrl, urlJoin } = require('../../common/utils') +const vueLoader = require('./vue-loader') +const styleLoader = require('./style-loader') const TimeFixPlugin = require('./plugins/timefix') const WarnFixPlugin = require('./plugins/warnfix') @@ -56,7 +58,7 @@ module.exports = function webpackBaseConfig({ name, isServer }) { { test: /\.vue$/, loader: 'vue-loader', - options: this.vueLoader({ isServer }) + options: vueLoader.call(this, { isServer }) }, { test: /\.js$/, @@ -64,11 +66,11 @@ module.exports = function webpackBaseConfig({ name, isServer }) { exclude: /node_modules/, options: this.getBabelOptions({ isServer }) }, - { test: /\.css$/, use: this.styleLoader('css') }, - { test: /\.less$/, use: this.styleLoader('less', 'less-loader') }, - { test: /\.sass$/, use: this.styleLoader('sass', {loader: 'sass-loader', options: { indentedSyntax: true }}) }, - { test: /\.scss$/, use: this.styleLoader('scss', 'sass-loader') }, - { test: /\.styl(us)?$/, use: this.styleLoader('stylus', 'stylus-loader') }, + { test: /\.css$/, use: styleLoader.call(this, 'css') }, + { test: /\.less$/, use: styleLoader.call(this, 'less', 'less-loader') }, + { test: /\.sass$/, use: styleLoader.call(this, 'sass', {loader: 'sass-loader', options: { indentedSyntax: true }}) }, + { test: /\.scss$/, use: styleLoader.call(this, 'scss', 'sass-loader') }, + { test: /\.styl(us)?$/, use: styleLoader.call(this, 'stylus', 'stylus-loader') }, { test: /\.(png|jpe?g|gif|svg)$/, loader: 'url-loader', diff --git a/lib/builder/webpack/postcss.js b/lib/builder/webpack/postcss.js index fb1b171636..a9c3674c46 100644 --- a/lib/builder/webpack/postcss.js +++ b/lib/builder/webpack/postcss.js @@ -1,8 +1,8 @@ const { existsSync } = require('fs') const { resolve } = require('path') +const { cloneDeep } = require('lodash') const debug = require('debug')('nuxt:postcss') const { isPureObject } = require('../../common/utils') -const { cloneDeep } = require('lodash') module.exports = function postcssConfig() { let config = cloneDeep(this.options.build.postcss) diff --git a/lib/builder/webpack/vue-loader.config.js b/lib/builder/webpack/vue-loader.js similarity index 61% rename from lib/builder/webpack/vue-loader.config.js rename to lib/builder/webpack/vue-loader.js index ed33271866..517b15a6e7 100644 --- a/lib/builder/webpack/vue-loader.config.js +++ b/lib/builder/webpack/vue-loader.js @@ -1,4 +1,5 @@ const postcssConfig = require('./postcss') +const styleLoader = require('./style-loader') module.exports = function vueLoader({ isServer }) { // https://vue-loader.vuejs.org/en @@ -13,12 +14,12 @@ module.exports = function vueLoader({ isServer }) { options: this.getBabelOptions({ isServer }) }, // Note: do not nest the `postcss` option under `loaders` - 'css': this.styleLoader('css', [], true), - 'less': this.styleLoader('less', 'less-loader', true), - 'scss': this.styleLoader('scss', 'sass-loader', true), - 'sass': this.styleLoader('sass', {loader: 'sass-loader', options: { indentedSyntax: true }}, true), - 'stylus': this.styleLoader('stylus', 'stylus-loader', true), - 'styl': this.styleLoader('stylus', 'stylus-loader', true) + 'css': styleLoader.call(this, 'css', [], true), + 'less': styleLoader.call(this, 'less', 'less-loader', true), + 'scss': styleLoader.call(this, 'scss', 'sass-loader', true), + 'sass': styleLoader.call(this, 'sass', {loader: 'sass-loader', options: { indentedSyntax: true }}, true), + 'stylus': styleLoader.call(this, 'stylus', 'stylus-loader', true), + 'styl': styleLoader.call(this, 'stylus', 'stylus-loader', true) }, template: { doctype: 'html' // For pug, see https://github.com/vuejs/vue-loader/issues/55