Sapper/Svelte中SASS预编译Webpack配置报错求助

Hey there, let's work through this Tapable error you're hitting after modifying your webpack.client.config.js to add SASS support in the Sapper RealWorld project. I've dealt with similar issues before, so here's what you need to check:

First, Don't Forget Sapper Is Isomorphic (You Need Both Client + Server Configs) #

The biggest mistake people make here is only updating the client webpack config—Sapper runs both client and server bundles, so you have to modify both webpack.client.config.js and webpack.server.config.js to get SASS working properly. Skipping the server config is a common trigger for weird Tapable hook errors.

Step 1: Install Required Dependencies #

First, make sure you have all the necessary packages installed. Run this in your project root:

npm install sass svelte-preprocess --save-dev

(Note: If you prefer Dart Sass over Node Sass, just use sass instead of node-sass—it's the recommended option now.)

Step 2: Update Webpack Configs Correctly #

1. Import svelte-preprocess at the top of both config files #

Add this line right after the existing imports:

const preprocess = require('svelte-preprocess');

2. Modify the Svelte Loader Configuration #

Find the module.rules section where svelte-loader is defined, and update the options to include the preprocessor. Here's what the modified rule should look like (for both client and server configs):

{
  test: /\.svelte$/,
  use: {
    loader: 'svelte-loader',
    options: {
      compilerOptions: {
        dev: !production
      },
      // Add this preprocess block
      preprocess: preprocess({
        scss: true, // Enable SCSS syntax
        sass: true, // Enable indented SASS syntax (if you use it)
        // Optional: Add additional preprocess options like include paths
        // scss: {
        //   includePaths: ['src/styles']
        // }
      })
    }
  }
}

Double-check for syntax errors here—missing commas or mismatched brackets are a frequent cause of Tapable initialization failures.

Step 3: Troubleshoot the Tapable Error #

That Tapable.js:375 error usually points to a problem with how webpack's hooks are being called, which often stems from:

• Version mismatches: Make sure your svelte-preprocess version is compatible with your Sapper and Svelte versions. For the older RealWorld Sapper repo, try locking svelte-preprocess to ^4.10.7 (a version that plays nicely with the repo's dependency stack).
• Duplicate loaders: Don't add a separate sass-loader rule for .scss files—svelte-preprocess handles compiling SASS directly within Svelte's <style> tags, so extra loaders will conflict.
• Corrupted dependencies: Sometimes node_modules gets messed up. Delete node_modules and package-lock.json, then reinstall:

  rm -rf node_modules package-lock.json
  npm install
  

Step 4: Verify Your Setup #

Add a SASS/SCSS style block to one of your Svelte components to test:

<style lang="scss">
  .article-card {
    padding: 1rem;
    .article-title {
      color: #2c3e50;
      font-weight: 600;
    }
  }
</style>

Then restart your server with node server.js—it should run without the Tapable error now, and your SASS should compile correctly.

内容的提问来源于stack exchange，提问作者Justin