2018-03-16 16:12:06 +00:00
|
|
|
import ExtractTextPlugin from 'extract-text-webpack-plugin'
|
|
|
|
import { join } from 'path'
|
|
|
|
import postcssConfig from './postcss'
|
2017-08-14 14:03:07 +00:00
|
|
|
|
2018-03-16 16:12:06 +00:00
|
|
|
export default function styleLoader(ext, loaders = [], isVueLoader = false) {
|
2017-12-28 15:30:31 +00:00
|
|
|
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
|
|
|
|
)
|
|
|
|
)
|
2017-12-28 15:30:31 +00:00
|
|
|
|
|
|
|
// 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
|
2018-01-08 09:37:10 +00:00
|
|
|
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 }
|
|
|
|
)
|
2018-01-08 09:37:10 +00:00
|
|
|
|
2017-12-28 15:30:31 +00:00
|
|
|
loaders.push({
|
|
|
|
loader: 'style-resources-loader',
|
2018-01-08 09:37:10 +00:00
|
|
|
options
|
2017-12-28 15:30:31 +00:00
|
|
|
})
|
|
|
|
}
|
2017-08-14 14:03:07 +00:00
|
|
|
|
2017-12-28 15:30:31 +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)
|
2018-01-08 09:37:10 +00:00
|
|
|
|
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
|
|
|
}
|
|
|
|
|
2017-12-28 15:30:31 +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
|
|
|
|
2017-12-28 15:30:31 +00:00
|
|
|
loaders.unshift({
|
2017-08-14 14:03:07 +00:00
|
|
|
loader: 'css-loader',
|
|
|
|
options: {
|
2017-12-28 15:30:31 +00:00
|
|
|
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-12-28 15:30:31 +00:00
|
|
|
})
|
2017-08-14 14:03:07 +00:00
|
|
|
|
2017-12-28 15:30:31 +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
|
|
|
})
|
|
|
|
|
2017-12-28 15:30:31 +00:00
|
|
|
// css-hot-loader
|
|
|
|
// https://github.com/shepherdwind/css-hot-loader
|
|
|
|
const hotLoader = {
|
|
|
|
loader: 'css-hot-loader',
|
|
|
|
options: { sourceMap }
|
2017-11-20 23:56:14 +00:00
|
|
|
}
|
2017-12-28 15:30:31 +00:00
|
|
|
|
2018-01-13 05:22:11 +00:00
|
|
|
return this.options.dev ? [hotLoader].concat(extractLoader) : extractLoader
|
2017-11-20 23:56:14 +00:00
|
|
|
}
|
|
|
|
|
2017-12-28 15:30:31 +00:00
|
|
|
// -- Without extractCSS --
|
2018-01-13 05:22:11 +00:00
|
|
|
return [vueStyleLoader].concat(loaders)
|
2017-08-14 14:03:07 +00:00
|
|
|
}
|