Vue-Styleguidist项目中从node-sass切换至纯dart-sass（sass）的实现方案咨询

Great question! The issue you're facing is almost certainly because your project's build tool (like Webpack, Vue CLI, Gulp, etc.) is still configured to look for node-sass specifically, even after you've installed the pure sass package. Here's how to fix this properly and get your project running with just sass in your devDependencies:

Step 1: Clean up old dependencies and install the correct packages #

First, fully remove node-sass and ensure you have the right version of sass and a compatible sass-loader (if your setup uses it):

# Uninstall node-sass
npm uninstall node-sass

# Install sass and a sass-loader version that supports dart-sass
# Sass-loader v10+ defaults to using dart-sass (the `sass` package)
npm install --save-dev sass sass-loader@^10.0.0

Step 2: Update your build tool configuration #

You need to tell your build system to use sass instead of node-sass. Here are common scenarios:

For Vue CLI projects (vue.config.js):

Look for the css.loaderOptions.sass section and update the implementation value:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // Replace require('node-sass') with require('sass')
        implementation: require('sass')
      }
    }
  }
}

For Webpack projects (webpack.config.js):

In your SCSS loader rule, update the implementation option for sass-loader:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              // Point to the sass package instead of node-sass
              implementation: require('sass')
            }
          }
        ]
      }
    ]
  }
}

For Gulp projects (gulpfile.js):

If you're using gulp-sass, ensure you're on a recent version (it defaults to dart-sass now) and explicitly set the compiler if needed:

const sass = require('gulp-sass')(require('sass')); // Explicitly use the sass package

// Or if you have an existing setup:
// sass.compiler = require('sass');

Step 3: Clear cache and reinstall dependencies #

Old cache can sometimes cause lingering references to node-sass. Clean things up to be safe:

# Clear npm cache
npm cache clean --force

# Delete node_modules and lock file
rm -rf node_modules package-lock.json

# Reinstall all dependencies
npm install

Step 4: Verify your setup #

Check your package.json to confirm only sass is present in devDependencies (no node-sass entries), then run your build/serve command:

npm run build # Or npm run serve, depending on your project

Why the wrapper workaround worked #

When you use npm install --save-dev node-sass@npm:sass, you're essentially aliasing the sass package to the node-sass name. This tricks your build tool into thinking it's using node-sass, but it's actually pulling in sass under the hood. The fix above makes your tooling directly use the sass package without needing this alias.

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