Next.js babel chargeur fichiers SCSS habitude de charge

Question

Je suis en cours d'exécution d'un projet next.js mais avec une structure de répertoire différent:

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

J'ai mis le répertoire à l'intérieur des next.js objet à l'intérieur de mon serveur index.js fichier. par exemple (const nextLoader = next({dev, dir: './site'});).

Lorsque je cours npm run dev il construit avec succès à côté mais oublie le scss. Je reçois actuellement cette erreur:

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"; 

Je n'ai pas eu ce problème avant de définir le répertoire dans l'objet next.js.

Ceci est mon fichier 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 
    } 
} 

et mon fichier .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: [ ] 
} 

avis, j'ai même mis l'alias correctement: "alias": {"styles": "./site/static/styles"}

toute aide serait incroyable!

Answer 1

Et après avoir joué pendant des heures, je l'ai compris. Vous devez placer votre fichier next.config.js dans le répertoire que vous avez indiqué à dir: './site'.