diff --git a/docs/css.md b/docs/css.md index 6afdea6ab2..19e41982d6 100644 --- a/docs/css.md +++ b/docs/css.md @@ -17,6 +17,8 @@ As for standalone style files, any files ending with `.module.(css|sass|scss|les If you wish to be able to use CSS modules without the `.module` postfix, you can set `css: { modules: true }` in `vue.config.js`. This option does not affect `*.vue` files. +If you wish to customize the CSS modules class name output you can set the `css: { localIdentName: [name]__[local]--[hash:base64:5]}` in `vue.config.js`. + ### Pre-Processors You can select pre-processors (Sass/Less/Stylus) when creating the project. If you did not do so, you can also just manually install the corresponding webpack loaders. The loaders are pre-configured and will automatically be picked up. For example, to add Sass to an existing project, simply run: diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js index 37ac222510..2aeb891d31 100644 --- a/packages/@vue/cli-service/__tests__/css.spec.js +++ b/packages/@vue/cli-service/__tests__/css.spec.js @@ -140,6 +140,21 @@ test('css.sourceMap', () => { }) }) +test('css.localIdentName', () => { + const localIdentName = '[name]__[local]--[hash:base64:5]' + const config = genConfig({ + vue: { + css: { + modules: true, + localIdentName: localIdentName + } + } + }) + LANGS.forEach(lang => { + expect(findOptions(config, lang, 'css').localIdentName).toBe(localIdentName) + }) +}) + test('css.loaderOptions', () => { const data = '$env: production;' const config = genConfig({ diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index 71f7d029f9..9e1c1d3375 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/packages/@vue/cli-service/lib/config/css.js @@ -19,7 +19,8 @@ module.exports = (api, options) => { extract: true, modules: false, sourceMap: false, - loaderOptions: {} + loaderOptions: {}, + localIdentName: '[name]_[local]__[hash:base64:5]' } const userOptions = Object.assign(defaultOptions, options.css || {}) const extract = isProd && userOptions.extract !== false @@ -52,7 +53,7 @@ module.exports = (api, options) => { options.loaders = Object.assign(resolver.vue(), options.loaders) options.cssSourceMap = !!userOptions.cssSourceMap options.cssModules = Object.assign({ - localIdentName: '[name]_[local]__[hash:base64:5]' + localIdentName: baseOptions.localIdentName }, options.cssModules) return options }) diff --git a/packages/@vue/cli-service/lib/options.js b/packages/@vue/cli-service/lib/options.js index f6ed64945f..340369c4d5 100644 --- a/packages/@vue/cli-service/lib/options.js +++ b/packages/@vue/cli-service/lib/options.js @@ -17,6 +17,7 @@ const schema = createSchema(joi => joi.object({ css: joi.object({ modules: joi.boolean(), extract: joi.boolean(), + localIdentName: joi.string(), sourceMap: joi.boolean(), loaderOptions: joi.object({ sass: joi.object(), @@ -77,6 +78,7 @@ exports.defaults = () => ({ css: { // extract: true, // modules: false, + // localIdentName: '[name]_[local]_[hash:base64:5]', // sourceMap: false, // loaderOptions: {} }, diff --git a/packages/@vue/cli-service/lib/webpack/CSSLoaderResolver.js b/packages/@vue/cli-service/lib/webpack/CSSLoaderResolver.js index 2625264592..72b2cce90b 100644 --- a/packages/@vue/cli-service/lib/webpack/CSSLoaderResolver.js +++ b/packages/@vue/cli-service/lib/webpack/CSSLoaderResolver.js @@ -13,6 +13,7 @@ module.exports = class CSSLoaderResolver { * @param {Object} options * @param {boolean} [options.sourceMap=undefined] Enable sourcemaps. * @param {boolean} [options.modules=undefined] Enable CSS modules. + * @param {string} [options.localIdentName='[name]_[local]__[hash:base64:5]'] Customizes CSS modules localIdentName. * @param {boolean} [options.extract=undefined] Extract CSS. * @param {boolean} [options.minimize=undefined] Minimize CSS. * @param {boolean} [options.postcss=undefined] Enable postcss-loader. @@ -21,6 +22,7 @@ module.exports = class CSSLoaderResolver { constructor ({ sourceMap, modules, + localIdentName, extract, minimize, postcss, @@ -32,6 +34,7 @@ module.exports = class CSSLoaderResolver { this.extract = extract && !process.env.VUE_CLI_CSS_SHADOW_MODE this.minimize = minimize this.modules = modules + this.localIdentName = localIdentName this.postcss = postcss this.loaderOptions = loaderOptions || {} } @@ -45,7 +48,7 @@ module.exports = class CSSLoaderResolver { if (this.modules) { cssLoaderOptions.modules = true cssLoaderOptions.importLoaders = 1 - cssLoaderOptions.localIdentName = '[name]_[local]__[hash:base64:5]' + cssLoaderOptions.localIdentName = this.localIdentName } if (loader === 'css') {