Getting scss parse error in running storybook on svelte

user_15173149 0
Viewed 700

Getting Parse error identifier expected when running storybook in svelte project

Tried installing @storybook/preset-scss, sass-loader, node-sass but still getting error like

Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Identifier is expected (204:4)
202:     position: relative;
203:
204:     .error-panel {
         ^
205:       position: absolute;
206:       bottom: 100%;
storybook svelte sass
1 Answers

You need to install svelte-preprocess to use Sass inside a Svelte component. Install the package and add preprocess to the svelte-loader options.

// webpack.config.js

// other imports
const sveltePreprocess = require('svelte-preprocess');

module.exports = {
    // other properties
    module: {
        rules: [
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        // other svelte-loader options
                        preprocess: sveltePreprocess() // this will process sass inside a component
                    }
                }
            },
            // other loaders
        ]
    },
    // etc
};

You can then write Sass inside a component like so (note the lang="scss" attribute on the style tag).

<main>
    <h1>Hello world!</h1>
</main>

<style lang="scss">
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;

        h1 {
            color: green;
        }
    }
</style>
user_148089880
Related