前言
nuxt 學習之路 - nuxt.config.js 配置篇,進行 scss 配置,實現全局樣式,全局變量,全局混合(以 scss 爲例, LESS 和 Stylus的配置方式相同)
一、配置全局 scss,每個頁面都引入
要使用 scss 就要先安裝 node-sass 和 sass-loader(npm install --save-dev node-sass sass-loader)。nuxt 會自動識別被導入文件的擴展名,然後 webpack 會使用相應的預處理器進行處理,所以要先安裝相對應的預處理器。
在 nuxt.conf.js 進行配置:
// nuxt.conf.js
module.exports = {
/*
** 配置全局 css
*/
css: [
'@/assets/style/main.scss'
]
}
// main.scss
body {
background-color: skyblue;
}
這樣,我們配置的全局樣式就生效了。
二、配置全局 scss 變量 和 mixin
爲頁面注入 變量 和 mixin 而且不用每次都去導入他們,可以使用 @nuxtjs/style-resources 來實現。
1.安裝,npm i @nuxtjs/style-resources -D
2.配置(nuxt.config.js):
// nuxt.config.js
module.exports = {
modules: [
'@nuxtjs/style-resources' // 添加對應的模塊
],
styleResources: {
scss: [
'./assets/style/variables.scss', // 全局 scss 變量
'./assets/style/mixins.scss' // 全局 scss 混合
]
}
}
3.實現:
// mixins.scss
@mixin center() {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
// variables.scss
$gray: #333;
// pages/index.vue
<style lang="scss" scoped>
.container {
background-color: $gray;
@include center;
}
</style>
這樣就不用每次都導入,而可以直接引用了。
注意:styleResources 配置的資源路徑不能使用 ~ 和 @ ,需要使用相對或絕對路徑。