在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ nuxt.js中全局引用scss變量的問(wèn)題

nuxt.js中全局引用scss變量的問(wèn)題

官方示例：https://github.com/nuxt/nuxt....
在nuxt.js中assets下面定義了mixins.scss，想在項(xiàng)目中全局引用，其中有一個(gè)變量 $theme_color我在test.vue中使用import引入scss文件，調(diào)用變量正常

test.vue

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

但是這樣比較繁瑣，每個(gè)頁(yè)面都得import，所以看了解決方案說(shuō)在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' 
        }
    }
     
    ...
}

報(bào)錯(cuò)提示這個(gè)
File to import not found or unreadable: ....
clipboard.png

這個(gè)問(wèn)題怎么解決呢？

回答
編輯回答
朽鹿

同樓上 是不是沒(méi)裝loader

2017年9月17日 09:13
編輯回答
執(zhí)念

我用的官方腳手架生成的項(xiàng)目，然后試了下全局引入scss文件，沒(méi)問(wèn)題啊。注意要裝這幾個(gè)模塊

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' 
    }
  }
}
2017年11月22日 16:01