NuxtJS & SASS Loader - 在生产环境中使用 sass-loader (SCSS) 构建

Posted

技术标签:

【中文标题】NuxtJS & SASS Loader - 在生产环境中使用 sass-loader (SCSS) 构建【英文标题】:NuxtJS & SASS Loader - Build with sass-loader (SCSS) on production 【发布时间】:2018-09-19 00:00:59 【问题描述】:

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

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'
        ]
      )
    
  

  ...

问题出在生产上,我有这个错误:

找不到模块 "!!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.js 社区 (#c6871) 上找到

【问题讨论】:

您只在生产中遇到这个问题?开发环境没问题吧? 是的,仅在生产中发布。 【参考方案1】:

好的,我在 nuxt.config.js 上不需要这个配置,只需安装 sass-loadernode-sass在“依赖项”中,而不是在“devDependencies”中。

【讨论】:

以上是关于NuxtJS & SASS Loader - 在生产环境中使用 sass-loader (SCSS) 构建的主要内容,如果未能解决你的问题,请参考以下文章

无法使用 `sass-loader` 内联样式

SCSS 在 Vue JS 中无需 SASS-loader 即可工作

为啥我不能在 docker 中构建这个 nuxtjs 应用程序,而本地构建工作?

Nuxtjs如何在所有sass文件中添加全局环境变量

带有 sass-loader 和 resolve-url-loader 的 Webpack 4 - 找不到图像路径

解决sass-loader和node-sass版本冲突问题(太难了)