1
0
mirror of https://github.com/nuxt/nuxt.git synced 2024-12-18 10:17:16 +00:00
Nuxt/examples/style-resources
2019-01-22 11:04:19 +03:30
..
assets example: Add Less file to show multi pre-processors 2018-01-08 10:41:30 +01:00
pages refactor: use PascalCase for components names () 2018-11-24 22:19:19 +03:30
nuxt.config.js feat: rewrite core to esm 2018-03-16 19:42:06 +03:30
package.json fix(examples): fix deps on codesandbox () 2019-01-22 11:04:19 +03:30
README.md refactor: use PascalCase for components names () 2018-11-24 22:19:19 +03:30

Using build.styleResources with Nuxt.js

This is useful when you need to inject some variables and mixins in your pages without having to import them every time.

Nuxt.js uses https://github.com/yenshih/style-resources-loader to achieve this behaviour.

You need to specify the patterns/path you want to include for the given pre-processors: css, less, sass, scss or stylus

⚠️ You cannot use path aliases here (~ and @), you need to use relative or absolute paths.

nuxt.config.js:

{
  build: {
    styleResources: {
      scss: './assets/variables.scss',
      less: './assets/*.less',
      // sass: ...,
      // scss: ...
      options: {
        // See https://github.com/yenshih/style-resources-loader#options
        // Except `patterns` property
      }
    }
  }
}

⚠️ If you want to use @import in these styleResources files, you should use path alias (~@) like this

@import '~@/assets/other.scss';

Then in your pages, you can use directly:

pages/index.vue

<template>
  <div class="main">
    <p>Page with SCSS</p>
    <p><NuxtLink to="/less">LESS</NuxtLink></p>
  </div>
</template>

<style lang="scss">
/* ~/assets/variables.scss is injected automatically here */
.main {
  background: $main;
}
</style>

Thanks to 0pt1m1z3r for adding this feature and example.