The problem of Global referencing scss variables in nuxt.js
official example: https://github.com/nuxt/nuxt.
defines a global reference in the project under assets in nuxt.js, in which there is a variable $theme_color. I use import in test.vue to introduce the scss file, and the calling variable is normal
.
test.vue
<style lang="scss" scoped>
@import "~assets/sass/mixins.scss";
.bottom-tab-bar {
.tab-item {
color: $theme_color;
}
}
</style>
but this is cumbersome. Every page needs import, so I read the solution and said to introduce
into nuxt.config.js.
nuxt.config.js
module.exports = {
...
build: {
// You cannot use ~/ or @/ here since it"s a Webpack plugin
styleResources: {
scss: "./assets/sass/init.scss"
}
}
...
}
error prompt this
File to import not found or unreadable:.
how to solve this problem?
originally comes with a @ nuxtjs/style-resources module, which is configured in nuxt.config.js as follows:
styleResources: {
// stylus: './assets/css/css.styl'
scss: './assets/scss/variables.scss'
// less: './assets/**/*.less'
// sass: ...
},
but it causes the style to be loaded repeatedly, loading as many times as there are subcomponents, and then changed to:
css: [
'./assets/scss/variables.scss'
],
can be used as well, and it doesn't load repeatedly
.
I used the official scaffolding to generate the project, and then tried to introduce the scss file globally, no problem. Pay attention to install these modules
npm install node-sass scss scss-loader --save-dev
here is my nuxt.config.js code
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'nuxt-test',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '-sharp3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
styleResources: {
scss: './assets/a.scss'
}
}
}
is there no loader installed upstairs
