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

111 lines
2.8 KiB
JavaScript
Raw Normal View History

2018-03-16 19:11:24 +00:00
import path from 'path'
2018-03-16 19:52:17 +00:00
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
2018-03-16 19:52:17 +00:00
import PostcssConfig from './postcss'
2017-08-14 14:03:07 +00:00
export default class StyleLoader {
constructor(options, nuxt, { isServer }) {
this.isServer = isServer
this.dev = options.dev
this.srcDir = options.srcDir
this.assetsDir = options.dir.assets
this.staticDir = options.dir.static
this.extractCSS = options.build.extractCSS
this.resources = options.build.styleResources
this.sourceMap = Boolean(options.build.cssSourceMap)
if (options.build.postcss) {
this.postcssConfig = new PostcssConfig(options, nuxt)
}
}
normalize(loaders) {
loaders = Array.isArray(loaders) ? loaders : [loaders]
return loaders.map(loader => Object.assign(
{ options: { sourceMap: this.sourceMap } },
typeof loader === 'string' ? { loader } : loader
))
}
styleResource(ext) {
const extResource = this.resources[ext]
// style-resources-loader
// https://github.com/yenshih/style-resources-loader
if (extResource) {
const patterns = Array.isArray(extResource)
? extResource
: [extResource]
2017-08-14 14:03:07 +00:00
return {
loader: 'style-resources-loader',
options: Object.assign(
{ patterns },
this.resources.options || {}
)
}
2017-12-28 16:05:34 +00:00
}
}
2017-08-14 14:03:07 +00:00
postcss() {
// postcss-loader
// https://github.com/postcss/postcss-loader
if (this.postcssConfig) {
const config = this.postcssConfig.config()
if (config) {
return {
loader: 'postcss-loader',
options: Object.assign({ sourceMap: this.sourceMap }, config)
}
}
2017-08-14 14:03:07 +00:00
}
}
2017-08-14 14:03:07 +00:00
css(importLoaders) {
// css-loader
// https://github.com/webpack-contrib/css-loader
const cssLoaderAlias = {
[`/${this.assetsDir}`]: path.join(this.srcDir, this.assetsDir),
[`/${this.staticDir}`]: path.join(this.srcDir, this.staticDir)
}
return {
loader: (this.isServer && this.extractCSS) ? 'css-loader/locals' : 'css-loader',
options: {
sourceMap: this.sourceMap,
minimize: !this.dev,
importLoaders: importLoaders,
alias: cssLoaderAlias
}
}
}
extract() {
if (this.extractCSS && !this.isServer) {
return MiniCssExtractPlugin.loader
}
}
vueStyle() {
// https://github.com/vuejs/vue-style-loader
return {
loader: 'vue-style-loader',
options: { sourceMap: this.sourceMap }
}
}
apply(ext, loaders = []) {
const _customLoaders = [].concat(
this.postcss(loaders),
this.styleResource(ext),
this.normalize(loaders)
).filter(Boolean)
return [].concat(
this.extract() || this.vueStyle(),
this.css(_customLoaders.length),
_customLoaders
).filter(Boolean)
}
2017-08-14 14:03:07 +00:00
}