const fs = require('fs') const path = require('path') const { semver, warn, pauseSpinner, resumeSpinner } = require('@vue/cli-shared-utils') const findExisting = (context, files) => { for (const file of files) { if (fs.existsSync(path.join(context, file))) { return file } } } module.exports = (api, rootOptions) => { api.chainWebpack(webpackConfig => { const getAssetPath = require('../util/getAssetPath') const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE const isProd = process.env.NODE_ENV === 'production' let sassLoaderVersion try { sassLoaderVersion = semver.major(require('sass-loader/package.json').version) } catch (e) {} if (sassLoaderVersion < 8) { pauseSpinner() warn('A new version of sass-loader is available. Please upgrade for best experience.') resumeSpinner() } const defaultSassLoaderOptions = {} try { defaultSassLoaderOptions.implementation = require('sass') // since sass-loader 8, fibers will be automatically detected and used if (sassLoaderVersion < 8) { defaultSassLoaderOptions.fiber = require('fibers') } } catch (e) {} const { extract = isProd, sourceMap = false, loaderOptions = {} } = rootOptions.css || {} let { requireModuleExtension } = rootOptions.css || {} if (typeof requireModuleExtension === 'undefined') { if (loaderOptions.css && loaderOptions.css.modules) { throw new Error('`css.requireModuleExtension` is required when custom css modules options provided') } requireModuleExtension = true } const shouldExtract = extract !== false && !shadowMode const filename = getAssetPath( rootOptions, `css/[name]${rootOptions.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 (!hasPostCSSConfig) { loaderOptions.postcss = { plugins: [ require('autoprefixer') ] } } // 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 (rootOptions.productionSourceMap && sourceMap) { cssnanoOptions.map = { inline: false } } function createCSSRule (lang, test, loader, options) { const baseRule = webpackConfig.module.rule(lang).test(test) // rules for