CODEWITHSUNDEEP
javascriptsveltesvelte-3
Razvan Zamfir
Razvan Zamfir

Reputation: 4616

What causes failure to compile SASS in this svelte applcation?

I am working on a project with Svelte and the material design library Svelte Material UI.

This material design library requires SASS, so I installed a preprocessor with npm install svelte-preprocess and added preprocess: autoPreprocess() in rollup.config.js. So I now have:

plugins: [
    svelte({
        // enable run-time checks when not in production
        dev: !production,
        // we'll extract any component CSS out into
        // a separate file - better for performance
        css: css => {
            css.write('public/build/bundle.css');
        },
        preprocess: autoPreprocess()
    }),
    routify({ singleBuild : true}),
    replace({
      // stringify the object
      APPENV: JSON.stringify({         
          isProd: production,
          ...config().parsed // attached the .env config            
      }),
  }),
  // more stuff
]

I have a file smui.js with this content:

import Button from '@smui/button';
import Checkbox from '@smui/checkbox';
import Chips from '@smui/chips';
import Dialog from '@smui/dialog';
import FormField from '@smui/form-field';
import Select from '@smui/select';

export {
  Button,
  Checkbox,
  Chips,
  Dialog,
  FormField,
  Select
}

In my index.svelte file I am importing the above this way: import * as Smui from "../smui.js";.

Instead of a success message with the port on which the app should run, I get:

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
node_modules\@smui\dialog\_index.scss (1:0)
1: @import "smui-theme";
   ^
2: @import "./style";
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

What am I doing wrong?

Upvotes: 1

Views: 1352

Answers (2)

Naren
Naren

Reputation: 4480

I had the same issue and somehow I managed to fix this with rollup-plugin-postcss plugin. Update your rollup.config.js with the following code and you should have _smui-theme.scss in your one of sass directories.

import postcss from 'rollup-plugin-postcss'
...

plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: css => {
                css.write('public/build/bundle.css')
            }
        }),

        postcss({
            extensions: ['.css'],
            extract: true,
            minimize: true,
            use: [['sass', { includePaths: ['./src/(yoursass-directory-name)', './node_modules'] }]]
        })

Upvotes: 3

Marcosaurios
Marcosaurios

Reputation: 97

I've never used @import to import components from a NPM package, but at the readme package you're referencing it recommends using 'import x from" svelte-material'. Also pay attention that svelte-preprocess won't be supported by the package you're referencing, take a look at the readme:

To bundle this in your own code, use a Sass processor (not a Sass Svelte preprocessor, but a Sass processor).

Upvotes: 0

Related Questions