NuxtJS和SASS Loader-在生产中使用sass-loader(SCSS)进行构建 [英] NuxtJS & SASS Loader - Build with sass-loader (SCSS) on production

问题描述

我已添加以下行以在开发(本地)服务器上使用sass-loader进行构建:

I've added this lines to build with sass-loader on development (local) server:

nuxt.config.js

module.exports = {

  mode: 'spa',

  build: {
    analyze: {
      analyzerMode: 'static',
      generateStatsFile: true,
      statsFilename: 'webpack-stats.json',
      openAnalyzer: false
    },
    vendor: [
      'axios',
      'vuetify'
    ],
    extend (config) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
      const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader')
      vueLoader.options.loaders.scss = 'vue-style-loader!css-loader!sass-loader?' + JSON.stringify({
        includePaths: [
          path.resolve(__dirname), 'node_modules'
        ]
      })
    }
  }

  ...
}

问题出在生产中，我遇到了这个错误:

The problem is on production, I've this error:

找不到模块"!! vue-style-loader！css-loader！../../../node_modules/vue-loader/lib/style-compiler/index?{" vue:true，" id:" data-v-7ef06ffa，" scoped:true，" hasInlineConfig:true}！sass-loader?{{includePaths :: ["/app/config，" node_modules]}！.../../../node_modules/vue-loader/lib/selector?type = styles& index = 0！./index.vue"

Cannot find module "!!vue-style-loader!css-loader!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ef06ffa","scoped":true,"hasInlineConfig":true}!sass-loader?{"includePaths":["/app/config","node_modules"]}!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./index.vue"

推荐答案

好吧，我不需要 nuxt.config.js 上的此配置，只需安装 sass-loader 和 node-sass 在依赖关系"中，而不是在"devDependencies"中.

Ok, I haven't need of this config on nuxt.config.js, just install sass-loader and node-sass in "dependencies", not in "devDependencies".

这篇关于NuxtJS和SASS Loader-在生产中使用sass-loader(SCSS)进行构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！