const fs = require('fs') const path = require('path') const findExisting = (context, files) => { for (const file of files) { if (fs.existsSync(path.join(context, file))) { return file } } } module.exports = (api, options) => { api.chainWebpack(webpackConfig => { const getAssetPath = require('../util/getAssetPath') const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE const isProd = process.env.NODE_ENV === 'production' const defaultSassLoaderOptions = {} try { defaultSassLoaderOptions.implementation = require('sass') defaultSassLoaderOptions.fiber = require('fibers') } catch (e) {} const { modules = false, extract = isProd, sourceMap = false, loaderOptions = {} } = options.css || {} const shouldExtract = extract !== false && !shadowMode const filename = getAssetPath( options, `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css` ) const extractOptions = Object.assign({ filename, chunkFilename: filename }, extract && typeof extract === 'object' ? extract : {}) // use relative publicPath in extracted CSS based on extract location const cssPublicPath = process.env.VUE_CLI_BUILD_TARGET === 'lib' // in lib mode, CSS is extracted to dist root. ? './' : '../'.repeat( extractOptions.filename .replace(/^\.[\/\\]/, '') .split(/[\/\\]/g) .length - 1 ) // check if the project has a valid postcss config // if it doesn't, don't use postcss-loader for direct style imports // because otherwise it would throw error when attempting to load postcss config const hasPostCSSConfig = !!(loaderOptions.postcss || api.service.pkg.postcss || findExisting(api.resolve('.'), [ '.postcssrc', '.postcssrc.js', 'postcss.config.js', '.postcssrc.yaml', '.postcssrc.json' ])) // if building for production but not extracting CSS, we need to minimize // the embbeded inline CSS as they will not be going through the optimizing // plugin. const needInlineMinification = isProd && !shouldExtract const cssnanoOptions = { preset: ['default', { mergeLonghand: false, cssDeclarationSorter: false }] } if (options.productionSourceMap && sourceMap) { cssnanoOptions.map = { inline: false } } function createCSSRule (lang, test, loader, options) { const baseRule = webpackConfig.module.rule(lang).test(test) // rules for