next.config withSass构建错误：Webpack配置后无效的CSS

Question

我一直在尝试设置正确的配置，以将SCSS文件与style-jsx和next.js一起使用。

这是我的package.json文件：

{
  "name": "with-apollo",
  "version": "2.0.0",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "lint:fix": "eslint --fix components/ containers/",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules"
    }
  },
  "dependencies": {
    "@storybook/addon-links": "^5.0.10",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-source-maps": "0.0.4-canary.1",
    "classnames": "^2.2.6",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.2.0",
    "express": "^4.16.4",
    "graphql": "^0.9.3",
    "i": "^0.3.6",
    "isomorphic-fetch": "^2.2.1",
    "next": "^8.0.4",
    "next-routes": "^1.4.2",
    "npm": "^6.9.0",
    "postcss-css-variables": "^0.12.0",
    "prop-types": "^15.5.8",
    "react": "^16.8.6",
    "react-apollo": "^1.1.3",
    "react-dom": "^16.8.6",
    "react-lazyload": "^2.5.0",
    "react-photoswipe": "^1.3.0",
    "react-redux": "^5.0.5",
    "react-scripts": "^3.0.0",
    "recompose": "^0.24.0",
    "redux-thunk": "^2.3.0",
    "sass-loader": "^7.1.0",
    "sass-resources-loader": "^2.0.0",
    "trackjs": "^3.3.0",
    "webpack": "^4.30.0"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@storybook/addon-actions": "^5.0.10",
    "@storybook/react": "^5.0.10",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "jest": "^24.7.1",
    "jest-css-modules": "^2.0.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.17.0",
    "redux-mock-store": "^1.5.3",
    "standard": "^12.0.1",
    "styled-jsx-plugin-sass": "^1.0.0"
  }
}

这是我的.babelrc文件：

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": [
            ["styled-jsx-plugin-sass", {
                "sassOptions": {
                  "includePaths": ["~/styles"],
                  "sourceMap": true
                }
              }
            ]
          ]
        }
      }
    ]
  ]
}

这是我的文件夹结构：

.storybook/
components/
-- footer/
    --styles.scss // imports variables.scss from (./styles/variables.scss)
    --footer.js // imports styles.scss via style-jsx
static/
-- fonts/
-- img/
styles/
--variables.scss
--mixins.scss

使用此配置设置时可以构建项目，但是无法导出静态文件。我认为此配置适用于较旧版本的next.js：

// next.config.js
const withSass = require('@zeit/next-sass');
const path = require('path');

module.exports = withSass({
  async exportPathMap() {
    // need to find a solution for this... it's a hacky way
    const list = ['slate-bullet', 'bullet_new_navy', 'olive-bullet'];
    const pages = list.reduce(
      (pages, item) =>
        Object.assign({}, pages, {
          [`/products/${item}`]: {
            page: '/products',
            query: { productHandle: item }
          }
        }),
      {}
    );
    return Object.assign({}, pages, {
      '/products': { page: '/products' }
    });
  }
});

module.exports = {
  webpack: (config, { defaultLoaders }) => {
    config.resolve.alias['styles'] = path.join(__dirname, 'styles')
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        defaultLoaders.babel,
        {
          loader: require('styled-jsx/webpack').loader,
          options: {
            type: 'scoped'
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              './styles/*.scss'
            ]
          }
        }
      ]
    });

    return config;
  }
};

这是尝试同时加入webpack和导出路径映射的配置（失败）。

// next.config.js
module.exports = withSass({
  webpack: (config, { defaultLoaders }) => {
    config.resolve.alias['styles'] = path.join(__dirname, 'styles')
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        defaultLoaders.babel,
        {
          loader: require('styled-jsx/webpack').loader,
          options: {
            type: 'scoped'
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'sass-resources-loader',
          options: {
            resources: [
              './styles/*.scss'
            ]
          }
        }
      ]
    });

    return config;
  },
  async exportPathMap() {
    // need to find a solution for this... it's a hacky way
    const list = ['slate-bullet', 'bullet_new_navy', 'olive-bullet'];
    const pages = list.reduce(
      (pages, item) =>
        Object.assign({}, pages, {
          [`/products/${item}`]: {
            page: '/products',
            query: { productHandle: item }
          }
        }),
      {}
    );
    return Object.assign({}, pages, {
      '/products': { page: '/products' }
    });
  }
});

这是错误：

> Using external babel configuration
> Location: "/Users/mike/Sites/spoke-reactify/.babelrc"
[styled-jsx] Loading plugin from path: /Users/mike/Sites/spoke-reactify/node_modules/styled-jsx-plugin-sass/index.js
Failed to compile.

./components/Layout/styles.scss

^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var _defaultExport "
      in /Users/mike/Sites/spoke-reactify/components/Layout/styles.scss (line 1, column 1)

> Build error occurred

我需要能够运行yarn build && export以确保我的静态文件能够导出正确的样式，但是目前我不能，因为我不确定next.config.js文件在做什么。

有人遇到过类似的问题吗？