docs: add style extension (#512)

* dos: add style extension

* fix: explanation of how ext works

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

Co-authored-by: Alexander Lichter <manniL@gmx.net>

* Update configuration.md

Co-authored-by: Alexander Lichter <manniL@gmx.net>

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 specify an extension in the css array entry, eg. `css: ['~/assets/css/main']`, then only one file will be loaded depending on the order of `styleExtensions`. In this case only the `css` file will be loaded and the `scss` file will be ignored because `css` comes first in the default `styleExtension` array.
+
+</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 specify an extension in the css array entry, eg. `css: ['~/assets/css/main']`, then only one file will be loaded depending on the order of `styleExtensions`. In this case only the `css` file will be loaded and the `scss` file will be ignored because `css` comes first in the default `styleExtension` array.
+
+</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>