In Nuxt, you can choose your favorite CSS preprocessor to write the styles for your app, whether it is Sass, Less, or Stylus. They are already pre-configured for you in Nuxt. You can check out their configurations at https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js. So, you just need to install the preprocessor and its webpack loader in your Nuxt project. For example, if you want to use Less as your CSS preprocessor, just install the following dependencies in your Nuxt project:
$ npm i less --save-dev
$ npm i less-loader --save-dev
Then, you can start writing your Less code by setting the lang attribute to "less" in the <style> block, as follows:
// pages/index.vue
<template>
<p>Hello World</p>
</template>
<style scoped lang="less">
@align: center;
p {
text-align: @align;
}
</style>
From this example, you can see that writing modern CSS styles is as easy as writing modern JavaScript in Nuxt. All you are required to do is install your favorite CSS preprocessor and its webpack loader. We will use Less in this book in the upcoming chapters, but for now, let's find out what other features Nuxt offers.
For more information about these preprocessors and their webpack loaders, please visit the following links:
- http://lesscss.org/ for Less
- https://webpack.js.org/loaders/less-loader/ for less-loader
- https://sass-lang.com/ for Sass
- https://webpack.js.org/loaders/sass-loader/ for sass-loader
- http://stylus-lang.com/ for Stylus
- https://github.com/shama/stylus-loader for stylus-loader
