diff --git a/docs/guide/css.md b/docs/guide/css.md index e1c3c85244..5faaa4473c 100644 --- a/docs/guide/css.md +++ b/docs/guide/css.md @@ -108,8 +108,13 @@ module.exports = { css: { loaderOptions: { css: { - localIdentName: '[name]-[hash]', - camelCase: 'only' + // Note: the following config format is different between Vue CLI v4 and v3 + // For Vue CLI v3 users, please refer to css-loader v1 documentations + // https://github.com/webpack-contrib/css-loader/tree/v1.0.1 + modules: { + localIdentName: '[name]-[hash]', + localsConvention: 'camelCaseOnly' + } } } } diff --git a/packages/@vue/cli-service/lib/Service.js b/packages/@vue/cli-service/lib/Service.js index d350c06dad..b1f5442a3b 100644 --- a/packages/@vue/cli-service/lib/Service.js +++ b/packages/@vue/cli-service/lib/Service.js @@ -370,15 +370,6 @@ module.exports = class Service { resolved.baseUrl = resolved.publicPath removeSlash(resolved, 'outputDir') - // deprecation warning - // TODO remove in final release - if (resolved.css && resolved.css.localIdentName) { - warn( - `css.localIdentName has been deprecated. ` + - `All css-loader options (except "modules") are now supported via css.loaderOptions.css.` - ) - } - // validate options validate(resolved, msg => { error( diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index c5c66f1977..77ad2fa668 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -9,7 +9,7 @@ const findExisting = (context, files) => { } } -module.exports = (api, options) => { +module.exports = (api, rootOptions) => { api.chainWebpack(webpackConfig => { const getAssetPath = require('../util/getAssetPath') const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE @@ -22,16 +22,15 @@ module.exports = (api, options) => { } catch (e) {} const { - modules = false, extract = isProd, sourceMap = false, loaderOptions = {} - } = options.css || {} + } = rootOptions.css || {} const shouldExtract = extract !== false && !shadowMode const filename = getAssetPath( - options, - `css/[name]${options.filenameHashing ? '.[contenthash:8]' : ''}.css` + rootOptions, + `css/[name]${rootOptions.filenameHashing ? '.[contenthash:8]' : ''}.css` ) const extractOptions = Object.assign({ filename, @@ -71,7 +70,7 @@ module.exports = (api, options) => { cssDeclarationSorter: false }] } - if (options.productionSourceMap && sourceMap) { + if (rootOptions.productionSourceMap && sourceMap) { cssnanoOptions.map = { inline: false } } @@ -92,9 +91,10 @@ module.exports = (api, options) => { // rules for normal CSS imports const normalRule = baseRule.oneOf('normal') - applyLoaders(normalRule, modules) + const treatAllAsModules = !!(rootOptions.css && rootOptions.css.modules) + applyLoaders(normalRule, treatAllAsModules) - function applyLoaders (rule, modules) { + function applyLoaders (rule, isCssModule) { if (shouldExtract) { rule .use('extract-css-loader') @@ -122,15 +122,11 @@ module.exports = (api, options) => { ) }, loaderOptions.css) - if (modules) { - const { - localIdentName = '[name]_[local]_[hash:base64:5]' - } = loaderOptions.css || {} - Object.assign(cssLoaderOptions, { - modules: { - localIdentName - } - }) + if (isCssModule) { + cssLoaderOptions.modules = { + localIdentName: '[name]_[local]_[hash:base64:5]', + ...cssLoaderOptions.modules + } } rule @@ -186,7 +182,7 @@ module.exports = (api, options) => { webpackConfig .plugin('optimize-css') .use(require('@intervolga/optimize-cssnano-plugin'), [{ - sourceMap: options.productionSourceMap && sourceMap, + sourceMap: rootOptions.productionSourceMap && sourceMap, cssnanoOptions }]) } diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index 979fbc3def..9719a239f7 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -122,7 +122,6 @@ exports.defaults = () => ({ css: { // extract: true, // modules: false, - // localIdentName: '[name]_[local]_[hash:base64:5]', // sourceMap: false, // loaderOptions: {} },