snowpack node_modules .scss error

[Okhyun Lee]

I am trying to add snowpack to my existing custom babel/webpack React project and having some issues.

So I am getting the error below,

! updating dependencies...
⠼ snowpack installing... @web-components, @material-ui/core, @material-ui/core/Box, @material-ui/core/Breadcrumbs,....
✖ snowpack failed to load node_modules/[package_name]/build/elements/breadcrumb-bar/BreadcrumbBar.scss
  Unexpected token (Note that you need plugins to import files that are not JavaScript)

this is in my snowpack.config.js:

const webpackConfig = require('./webpack.config.js');

module.exports = {
    extends: '@snowpack/app-scripts-react',
    scripts: {
        'run:sass': 'sass src/css:public/css --no-source-map',
        'run:sass::watch': '$1 --watch',
        'bundle:*': '@snowpack/plugin-webpack',
        'build:js,jsx': '@snowpack/plugin-babel'
    },
    plugins: [
        '@snowpack/plugin-babel',
        '@snowpack/babel-plugin-package-import',
        [
            '@snowpack/plugin-webpack',
            {
                extendConfig: (config) => {
                    config.plugins.push(webpackConfig.plugins);
                    return config;
                },
            },
        ],
    ],
    devOptions: {
        port: 3000,
        open: 'none',
        bundle: false,
        out: 'dist'
    }
};

And in package.json

"scripts": {
    "prepare": "npx snowpack",
    "build": "PUBLIC_URL=/cycle webpack --config webpack.config.js --mode production",
    "start:server": "node server",
    "run:snow": "snowpack dev",
    "start:snow": "npm-run-all --parallel start:server:local run:snow",
    "start:server:local": "ENV=dev node server"
}

I ran

npm run start:snow

It is throwing the error while npx snowpack is running. Any insights would be appreciated. Any specific plugin I might be missing?

 Unexpected token (Note that you need plugins to import files that are not JavaScript)

[Fred K. Schott]

Try adding this to your snowpack config:

module.exports = {
  extends: '@snowpack/app-scripts-react',
  installOptions: {
    rollup: {plugins: [require('rollup-plugin-scss')()]}
  }
  // ...

We can probably improve that error message!

[Okhyun Lee]

@FredKSchott That was it! Thank you so much for your help! And I've noticed another error msg suggesting a specific plugin to install which def. helped to fix the issue. It would be good to have it for this error too.