docs: add style extension

content/en/guides/configuration-glossary/configuration-css.md

@@ -31,3 +31,21 @@ export default {
 ```
 
 Nuxt.js will automatically guess the file type by its extension and use the appropriate pre-processor loader for webpack. You will still need to install the required loader if you need to use them.
+
+### Style Extensions
+
+You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file.
+
+```js{}[nuxt.config.js]
+export default {
+  css: ['~/assets/css/main', '~/assets/css/animations']
+}
+```
+
+<base-alert>
+
+If you have two files with the same name eg. main.scss and main.css, and don't add an extension in the css array eg. `css:['~/assets/css/main']`, then the files will be loaded in a specific order, first the css file and then the scss file.
+
+</base-alert>
+
+Default order: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']`

content/en/guides/directory-structure/nuxt-config.md

@@ -62,10 +62,20 @@ This option lets you define the CSS files, modules, and libraries you want to in
 
 ```js{}[nuxt.config.js]
 export default {
-  css: ['~/assets/css/main.css']
+  css: ['~/assets/css/main.css', '~/assets/css/animations.scss']
 }
 ```
 
+You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file.
+
+```js{}[nuxt.config.js]
+export default {
+  css: ['~/assets/css/main', '~/assets/css/animations']
+}
+```
+
+By omitting the extension, if you have a css file and decide to change to use sass for example, you won't have to update your nuxt.config as it will use the new extension once the filename remains the same.
+
 <base-alert type="next">
 
 See more on the [css property](/guides/configuration-glossary/configuration-css)

content/en/guides/features/configuration.md

@@ -99,6 +99,24 @@ Nuxt.js will automatically guess the file type by its extension and use the appr
 
 </base-alert>
 
+### Style Extensions
+
+You can omit the file extension for CSS/SCSS/Postcss/Less/Stylus/... files listed in the css array in your nuxt config file.
+
+```js{}[nuxt.config.js]
+export default {
+  css: ['~/assets/css/main', '~/assets/css/animations']
+}
+```
+
+<base-alert>
+
+If you have two files with the same name eg. main.scss and main.css, and don't add an extension in the css array eg. `css:['~/assets/css/main']`, then the files will be loaded in a specific order, first the css file and then the scss file.
+
+</base-alert>
+
+Default order: `['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less']`
+
 <app-modal>
   <code-sandbox  :src="csb_link_pre-processors"></code-sandbox>
 </app-modal>
@@ -364,6 +382,10 @@ The axios-module cannot be used in `nuxt.config.js`. You will need to import axi
 
 ## Further configuration
 
-The `nuxt.config.js` has way more customization and configuration options! Check out all its keys in the glossary.
+<base-alert type="next">
+
+The `nuxt.config.js` has way more customization and configuration options! Check out all its keys in the [configuration glossary](/guides/configuration-glossary/configuration-build).
+
+</base-alert>
 
 <quiz :questions="questions"></quiz>