为什么我不能在 docker 中构建这个 nuxtjs 应用程序，而本地构建工作？答案

【问题标题】：Why can't I build this nuxtjs app inside docker, while local builds work?为什么我不能在 docker 中构建这个 nuxtjs 应用程序，而本地构建工作？
【发布时间】：2018-11-13 21:42:37
【问题描述】：

我正在 Mac 上开发这个 nuxtjs 项目（所有最新最好的），本地构建和生成工作正常。我使用sass-loader 作为开发依赖项，而我的nuxt.config.js 文件与默认文件没有太大区别：

module.exports = {
  head: {
    title: 'temp-www',
    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' }
    ]
  },
  modules: [
    [ 'nuxt-fontawesome', {
      component: 'fa',
      imports: [
        { set: '@fortawesome/fontawesome-free-brands' },
      ]
    }],
  ],
  loading: { color: '#3B8070' },
  build: {
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

然后我像这样创建了一个Dockerfile

FROM node:stretch

ENV NODE_ENV=production
ENV HOST=0.0.0.0

RUN mkdir -p /app
COPY . /app
WORKDIR /app

EXPOSE 3000

RUN npm install
RUN npm run build
CMD ["npm", "start"]

（和适当的.dockerignore）但在构建图像时出现以下错误。

ERROR in ./layouts/default.vue
Module not found: Error: Can't resolve 'sass-loader' in '/app/layouts'
 @ ./layouts/default.vue 2:2-436
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js

在那里和其他.vue 文件中，我在<style lang="scss"> 之类的块中使用sass。我尝试将其更改为sass，但没有任何区别。

奇怪的是，this question 说它应该通过将sass-loader 和 node-sass 作为运行时部门而不是 devtime 部门来工作。我对此持怀疑态度，但情况变得更糟，直到我将style 块中的lang 属性更改为scss 而不是sass。在这种情况下，并且仅在这种情况下，我正确构建了图像。

我错过了什么？

【问题讨论】：

标签： webpack sass nuxt.js

【解决方案1】：

你必须为 webpack 安装 sass-loader：

npm install sass-loader --save-dev

（参见官方文档“如何使用预处理器”（例如 sass）：https://nuxtjs.org/faq/pre-processors/）

但是将环境变量 NODE_ENV 设置为“生产”会导致 npm install 忽略 devDependencies。

所以你可以作为主要依赖安装：

npm install sass-loader --save

正确的方法是继续使用作为开发依赖项并在 CI 上构建您的应用，然后使用 NODE_ENV "production" 将其部署到您的生产环境中

【讨论】：

（我使用的是sass-loader）。按照您的建议，我仍然需要包含node_modules 目录，或者至少包含nuxt.config.js 中指定的模块。另一种方法是 generate 并用作静态文件。如果可能的话，我更喜欢使用build 而不是generated 代码。
并且您已经将 sass-loader 安装为依赖项 (--save) 或 devDependency (--save-dev) ？如果你想使用 NODE_ENV “生产”，你必须使用--save，如前所述。关于我的最后一个建议，这只是持续交付“只构建一次二进制文件，随处部署”的理念。使用带有 CI 平台（Jenkins、Travis、GitlabCI）的 node_modules 制作完整的 build，并将其部署到任何地方 :)
sass-loader 是一个 devDependency，我正在制作一个 build。正如您所说，问题在于 production 中忽略了 devDependencies - 我没有考虑过，我认为它更像是构建时/运行时的事情。 building 的问题，无论是在本地还是在 CI 中，都在于 webpack 在其配置中有 modules 需要在运行时可用。就我而言，sass 不是问题，因为一旦构建完成，它就完成了。但是，我在 webpack 的模块中有一个模块。没有办法告诉 webpack 将这些模块拉入构建中吗？ nuxt generate 似乎做到了。
我很困惑，我在 Docker 中重新做了一个build，但我没有遇到需要在node_modules 中的东西的问题。我昨天一定做错了什么。