Question

我正在运行next.js项目但具有不同的目录结构：

> core
  > server
    > index.js
> site
  > components
  > pages
  > static
    > styles

我在我的服务器index.js文件中的next.js对象中设置了目录。例如（const nextLoader = next({dev, dir: './site'});）。

当我运行npm run dev时，它成功构建了下一个但忘记了scss。我目前收到此错误：

ModuleParseError: Module parse failed: /home/dillonraphael/Desktop/creatorsneverdie/site/static/styles/main.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "~bulma";

在将目录设置在next.js对象中之前，我没有遇到此问题。

这是我的next.config.js文件：

const webpack = require('webpack');
const path = require('path');
const glob = require('glob');

module.exports = {
  webpack: (config, { dev }) => {
    config.plugins.push(
      new webpack.EnvironmentPlugin(process.env)
    );

    config.module.rules.push({
        /**
         * Image handler + compresses images
         */
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        use: [{
          loader: 'url-loader',
          options: {
            // name: production ? '[name]-[sha512:hash:base64:7].[ext]' : '[name].[ext]',
            name: '[name].[ext]',
            limit: 1000
          }
        }, {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              progressive: true
            },
            gifsicle: {
              interlaced: false
            },
            optipng: {
              optimizationLevel: 4
            },
            pngquant: {
              quality: '75-90',
              speed: 3
            }
          }
        }]
      },
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]'
        }
      }
    ,
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader']
      }
    ,
      {
        test: /\.s(a|c)ss$/,
        use: ['babel-loader', 'raw-loader',
          { loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
            }
          }
        ]
      }
    )
    return config
  }
}

和我的.babelrc文件：

{
  plugins: [
    "inline-react-svg",
    "styled-jsx/babel",
    ["module-resolver", { "root": ["."], "alias": {"styles": "./site/static/styles"}, "cwd": "babelrc"}],
    ["wrap-in-js", {"extensions": ["css$", "scss$"]}]
  ],
  presets: [
    "next/babel", "es2015", "stage-0"
  ],
  ignore: [ ]
}

注意，我甚至正确设置了别名："alias": {"styles": "./site/static/styles"}

任何帮助都会令人惊叹！

Answer 1

在玩了几个小时之后，我想通了。您必须将next.config.js文件放在dir: './site'所述的目录中。

Next.js babel loader不会加载scss文件

1 个答案: