Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit f4fb99d

Browse filesBrowse files
authored
feat!: upgrade to css-loader 5; remove css.requireModuleExtension & css.modules options (#6332)
1 parent c8a4852 commit f4fb99d
Copy full SHA for f4fb99d

File tree

Expand file treeCollapse file tree

9 files changed

+262
-207
lines changed
Filter options
Expand file treeCollapse file tree

9 files changed

+262
-207
lines changed

‎docs/config/README.md

Copy file name to clipboardExpand all lines: docs/config/README.md
+1-14Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -245,22 +245,9 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40
245245

246246
### css.modules
247247

248-
Deprecated since v4, please use [`css.requireModuleExtension`](#css-requireModuleExtension) instead.
249-
250-
In v3 this means the opposite of `css.requireModuleExtension`.
251-
252248
### css.requireModuleExtension
253249

254-
- Type: `boolean`
255-
- Default: `true`
256-
257-
By default, only files that ends in `*.module.[ext]` are treated as CSS modules. Setting this to `false` will allow you to drop `.module` in the filenames and treat all `*.(css|scss|sass|less|styl(us)?)` files as CSS modules.
258-
259-
::: tip
260-
If you have customized CSS Modules configurations in `css.loaderOptions.css`, then the `css.requireModuleExtension` field must be explicitly configured to `true` or `false`, otherwise we can't be sure whether you want to apply these options to all CSS files or not.
261-
:::
262-
263-
See also: [Working with CSS > CSS Modules](../guide/css.md#css-modules)
250+
Both removed in v5, see [Working with CSS > CSS Modules](../guide/css.md#css-modules) for guidance on how to treat all style imports as CSS Modules.
264251

265252
### css.extract
266253

‎docs/guide/css.md

Copy file name to clipboardExpand all lines: docs/guide/css.md
+17-9Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -81,40 +81,48 @@ In the production build, Vue CLI optimizes your CSS and will drop unnecessary ve
8181

8282
You can [use CSS Modules in `*.vue` files](https://vue-loader.vuejs.org/en/features/css-modules.html) out of the box with `<style module>`.
8383

84-
To import CSS or other pre-processor files as CSS Modules in JavaScript, the filename should end with `.module.(css|less|sass|scss|styl)`:
84+
To import CSS or other pre-processor files as CSS Modules in JavaScript, the filename should end with `.module(s).(css|less|sass|scss|styl)`:
8585

8686
``` js
8787
import styles from './foo.module.css'
8888
// works for all supported pre-processors as well
8989
import sassStyles from './foo.module.scss'
9090
```
9191

92-
If you want to drop the `.module` in the filenames, set `css.requireModuleExtension` to `false` in `vue.config.js`:
92+
If you want to drop the `.module` in the file names and treat all style files as CSS Modules, you need to configure the `css-loader` option as follows:
9393

9494
``` js
9595
// vue.config.js
9696
module.exports = {
9797
css: {
98-
requireModuleExtension: false
98+
loaderOptions: {
99+
css: {
100+
modules: {
101+
auto: () => true
102+
}
103+
}
104+
}
99105
}
100106
}
101107
```
102108

103-
If you wish to customize the generated CSS modules class names, you can do so via `css.loaderOptions.css` in `vue.config.js`. All `css-loader` options are supported here, for example `localIdentName` and `camelCase`:
109+
If you wish to customize the generated CSS Modules class names, you can do so via `css.loaderOptions.css` in `vue.config.js`, too. All `css-loader` options are supported here:
104110

105111
``` js
106112
// vue.config.js
107113
module.exports = {
108114
css: {
109115
loaderOptions: {
110116
css: {
111-
// Note: the following config format is different between Vue CLI v4 and v3
112-
// For Vue CLI v3 users, please refer to css-loader v1 documentations
113-
// https://github.com/webpack-contrib/css-loader/tree/v1.0.1
117+
// Note: the following config format is different between different Vue CLI versions
118+
// See the corresponding css-loader documentation for more details.
119+
// Vue CLI v3 uses css-loader v1: https://www.npmjs.com/package/css-loader/v/1.0.1
120+
// Vue CLI v4 uses css-loader v3: https://www.npmjs.com/package/css-loader/v/3.6.0
121+
// Vue CLI v5 uses css-loader v5: https://github.com/webpack-contrib/css-loader#readme
114122
modules: {
115123
localIdentName: '[name]-[hash]'
116-
},
117-
localsConvention: 'camelCaseOnly'
124+
exportLocalsConvention: 'camelCaseOnly'
125+
}
118126
}
119127
}
120128
}

‎docs/migrations/migrate-from-v4.md

Copy file name to clipboardExpand all lines: docs/migrations/migrate-from-v4.md
+6Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,12 @@ Underlyingly, it uses the [`resolutions`](https://classic.yarnpkg.com/en/docs/se
7272

7373
Though both work in all our tests, please be aware that the `module-alias` approach is still considered hacky, and may not be as stable as the `"resolutions"` one.
7474

75+
#### CSS Modules
76+
77+
The `css.requireModuleExtension` option is removed. If you do need to strip the `.module` part in CSS Module file names, please refer to [Working with CSS > CSS Modules](../guide/css.md#css-modules) for more guidance.
78+
79+
`css-loader` is upgraded from v3 to v5, a few CSS Module related options have been renamed, along with other changes. See [full changelog](https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md) for additional details.
80+
7581
#### Sass/SCSS
7682

7783
No longer supports generating project with `node-sass`. It has been [deprecated](https://sass-lang.com/blog/libsass-is-deprecated#how-do-i-migrate) for a while. Please use the `sass` package instead.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.