nuxt.js中全局引用scss变量的问题

Question

官方示例：https://github.com/nuxt/nuxt....
在nuxt.js中assets下面定义了mixins.scss，想在项目中全局引用，其中有一个变量 $theme_color我在test.vue中使用import引入scss文件，调用变量正常

test.vue

<style lang="scss" scoped>
    @import '~assets/sass/mixins.scss';
    .bottom-tab-bar {
        .tab-item {
            color: $theme_color;
        }
    }
</style>

但是这样比较繁琐，每个页面都得import，所以看了解决方案说在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' 
        }
    }
     
    ...
}

报错提示这个
File to import not found or unreadable: ....

这个问题怎么解决呢？

Answer 1

原来搭配了一个 @nuxtjs/style-resources 模块, nuxt.config.js 里配置是这样的 :

  styleResources: {
    // stylus: './assets/css/css.styl'
    scss: './assets/scss/variables.scss'
    // less: './assets/**/*.less'
    // sass: ...
  },

但是会导致重复加载样式, 有多少个子组件就重复加载多少次, 后来改为 :

  css: [
    './assets/scss/variables.scss'
  ],

一样能用, 也不重复加载了

Answer 2

我用的官方脚手架生成的项目，然后试了下全局引入scss文件，没问题啊。注意要装这几个模块

npm install node-sass scss scss-loader --save-dev

下面是我的nuxt.config.js具体代码

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: '#3B8070' },
  /*
  ** 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' 
    }
  }
}

Answer 3

同楼上 是不是没装loader