Svelte-loader custom component and global CSS/SCSS

[kl3sk]

Hello,

I setup Encore to use svelte-loader as such:

...
    .addLoader({
            test: /\.svelte$/,
            loader: 'svelte-loader',
            options: {
                preprocess: sveltePreprocess(),
                emitCss: true,
                compilerOptions: {
                    css: true,
                    dev: !Encore.isProduction(),
                    customElement: true,
                }
            }
        },
        {
            // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
            test: /node_modules\/svelte\/.*\.mjs$/,
            resolve: {
                fullySpecified: false
            }
        }
    )
...
let config = Encore.getWebpackConfig()
config.resolve.mainFields = ['svelte', 'browser', 'module', 'main']
config.resolve.extensions = ['.mjs', '.js', '.svelte']

let svelte = config.module.rules.pop()
config.module.rules.unshift(svelte)

module.exports = config

Svelete works as expected if I disable customElement options.

With this option enabled, I manage to have a working custom element, unless I use styles for nested component.

As I understand, it looks like not possible to style nested components inside it.

A workaround is to use :global inside parent element, but with my configuration it doesn't work.

Is there a specific webpack config for it I failed ?

Thanks

[mandrasch]

Hey, do you still have the problem? I use the following config and styling worked fine for me?

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

/* ... */

  // enables Sass/SCSS support
  .enableSassLoader();

  .addLoader({
    test: /\.svelte$/,
    loader: "svelte-loader",
    options: {
      preprocess: preprocess(),
      emitCss: true,
      compilerOptions: {
        css: true,
        dev: !Encore.isProduction()
      }
    }
  }, {
    // https://github.com/symfony/webpack-encore/issues/1112
    // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
    test: /node_modules\/svelte\/.*\.mjs$/,
    resolve: {
      fullySpecified: false
    }
  })

/* At the end */

// https://www.twilio.com/blog/develop-a-symfony-app-using-svelte-and-webpack-encore-to-manage-your-twilio-message-history 
let config = Encore.getWebpackConfig();

// https://github.com/sveltejs/svelte-loader
config.resolve = {
  alias: {
    svelte: path.resolve('node_modules', 'svelte')
  },
  extensions: ['.mjs', '.js', '.svelte'],
  mainFields: ['svelte', 'browser', 'module', 'main'],
  conditionNames: ['svelte']
};

module.exports = config;