Nuxt/lib/builder/webpack/style-loader.js

97 lines
2.7 KiB
JavaScript
Raw Normal View History

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { join } = require('path')
2017-12-28 16:05:34 +00:00
const postcssConfig = require('./postcss')
2017-08-14 14:03:07 +00:00
module.exports = function styleLoader(ext, loaders = [], isVueLoader = false) {
const sourceMap = Boolean(this.options.build.cssSourceMap)
2017-08-14 14:03:07 +00:00
// Normalize loaders
2018-01-13 05:22:11 +00:00
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[ext]) {
2018-01-13 05:22:11 +00:00
const patterns = Array.isArray(this.options.build.styleResources[ext])
? this.options.build.styleResources[ext]
: [this.options.build.styleResources[ext]]
const options = Object.assign(
{},
this.options.build.styleResources.options || {},
{ patterns }
)
loaders.push({
loader: 'style-resources-loader',
options
})
}
2017-08-14 14:03:07 +00:00
// postcss-loader
// vue-loader already provides it's own
2017-08-14 14:03:07 +00:00
// https://github.com/postcss/postcss-loader
2017-12-28 16:05:34 +00:00
if (!isVueLoader) {
const _postcssConfig = postcssConfig.call(this)
2017-12-28 16:05:34 +00:00
if (_postcssConfig) {
loaders.unshift({
loader: 'postcss-loader',
options: Object.assign({ sourceMap }, _postcssConfig)
})
}
2017-08-14 14:03:07 +00:00
}
// css-loader
2017-08-14 14:03:07 +00:00
// https://github.com/webpack-contrib/css-loader
2018-02-03 11:54:16 +00:00
const cssLoaderAlias = {}
2018-02-03 16:04:15 +00:00
cssLoaderAlias[`/${this.options.dir.assets}`] = join(this.options.srcDir, this.options.dir.assets)
cssLoaderAlias[`/${this.options.dir.static}`] = join(this.options.srcDir, this.options.dir.static)
2018-02-03 11:10:06 +00:00
loaders.unshift({
2017-08-14 14:03:07 +00:00
loader: 'css-loader',
options: {
sourceMap,
minimize: !this.options.dev,
importLoaders: loaders.length, // Important!
2018-02-03 11:54:16 +00:00
alias: cssLoaderAlias
2017-08-14 14:03:07 +00:00
}
})
2017-08-14 14:03:07 +00:00
// -- 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
2017-08-14 14:03:07 +00:00
})
// css-hot-loader
// https://github.com/shepherdwind/css-hot-loader
const hotLoader = {
loader: 'css-hot-loader',
options: { sourceMap }
}
2018-01-13 05:22:11 +00:00
return this.options.dev ? [hotLoader].concat(extractLoader) : extractLoader
}
// -- Without extractCSS --
2018-01-13 05:22:11 +00:00
return [vueStyleLoader].concat(loaders)
2017-08-14 14:03:07 +00:00
}