Gatsby 样式在生产版本中不起作用答案

【问题标题】：Gatsby styles are not working in production buildGatsby 样式在生产版本中不起作用
【发布时间】：2018-03-23 15:10:48
【问题描述】：

运行npm run dev 工作正常，但npm run build 创建production 构建会在public 构建文件夹中创建一个空的styles.css 文件。

npm run serve 最终得到一个没有样式的网站，因为它导入了空的 styles.css。

我尝试了gatsby-config.js中配置的gatsby-plugin-postcss-sass和gatsby-plugin-sass如下：

{
  resolve: "gatsby-plugin-postcss-sass",
  // resolve: "gatsby-plugin-sass",
  options: {
    includePaths: [
      path.resolve(__dirname, './node_modules'),
    ],
    postCssPlugins: [
      autoprefixer({
        browsers: ['last 2 versions'],
      })
    ]
  }
},

【问题讨论】：

标签： gatsby

【解决方案1】：

事实证明 Gatsby 使用的是 Webpack 1，而我不知何故最终得到了 "extract-text-webpack-plugin": "^3.0.0"，而该版本仅与 Webpack 3 兼容。

在我尝试了yarn add extract-text-webpack-plugin@^1.0.1、npm run clean 和npm run build 之后，styles.css 现在被 CSS 填充了，serve 显示了带有样式的网站。

【讨论】：