因?yàn)楣俜降奈臋nAPI還是有點(diǎn)內(nèi)容的锭魔，再加上網(wǎng)上文章一大抄笙隙，所以從官網(wǎng)API中搬運(yùn)過(guò)來(lái)
可以直接看文檔原文：文檔地址
styleResources
- 類型: Object
- 默認(rèn): {}
當(dāng)您需要在頁(yè)面中注入一些變量和mixin而不必每次都導(dǎo)入它們時(shí)石景，這非常有用捐康。
Nuxt.js 使用 https://github.com/nuxt-community/style-resources-module 來(lái)實(shí)現(xiàn)這種行為贞滨。
您需要為css預(yù)處理器指定要包含的 模式 / 路徑 ： less, sass, scss 或 stylus
??您不能在此處使用路徑別名(~ 和 @
?? You cannot use path aliases here (~ and @)入热，你需要使用相對(duì)或絕對(duì)路徑拍棕。
安裝 style-resources：
$ yarn add @nuxtjs/style-resources
根據(jù)需要安裝：
- SASS: $ yarn add sass-loader node-sass
- LESS: $ yarn add less-loader less
- Stylus: $ yarn add stylus-loader stylus
修改 nuxt.config.js:
export default {
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
scss: './assets/variables.scss',
less: './assets/**/*.less',
// sass: ...
}
}
然后就可以隨處直接使用定義過(guò)的變量或函數(shù)。
