Webpack version?

[debugpoint136]

Are you planning to release webpack version soon?

[Kiho]

@debugpoint136 You can check this out https://github.com/Kiho/smelte-monorepo/blob/master/packages/app-ts/webpack.config.js It will not work with current version, but you could get a idea.

[DougAnderson444]

@debugpoint136 Let us know if you got it working on webpack!

[debugpoint136]

Thanks for the pointer @Kiho, @DougAnderson444 - I am getting this error - ERROR in ./node_modules/smelte/src/tailwind.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--4-2!./node_modules/smelte/src/tailwind.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): SyntaxError

(131:3) `@apply` cannot be used with `.bg-dark-500` because `.bg-dark-500` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.bg-dark-500` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.`

Please find below my webpack.config.js-

const path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const getPreprocessor = require('svelte-preprocess');
const postcssPlugins = require("./postcss.config.js");

const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';
const isDevBuild = mode !== 'production';

const cssConfig = {
  test: /\.(sa|sc|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    { loader: 'postcss-loader', options: { extract: true, plugins: postcssPlugins(!isDevBuild) } },
  ],
};

console.log('mode', mode);

const preprocess = getPreprocessor({
  transformers: {
    postcss: {
      plugins: postcssPlugins()
    }
  }
});

module.exports = {
    entry: {
        bundle: ['./src/main.js']
    },
    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte'),
                components: path.resolve(__dirname, '../smelte/src/components'),
                utils: path.resolve(__dirname, '../smelte/src/utils')
        },
        extensions: ['.mjs', '.js', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    output: {
        path: __dirname + '/public',
        filename: '[name].js',
        chunkFilename: '[name].[id].js'
    },
    module: {
        rules: [
            cssConfig,
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        emitCss: true,
                        hotReload: true,
                        dev: isDevBuild, 
            preprocess,
                    }
                },
                exclude: ['/node_modules/']
            },
            // {
            //  test: /\.css$/,
            //  use: [
            //      /**
            //       * MiniCssExtractPlugin doesn't support HMR.
            //       * For developing, use 'style-loader' instead.
            //       * */
            //      prod ? MiniCssExtractPlugin.loader : 'style-loader',
            //      'css-loader'
            //  ]
            // }
        ]
    },
    mode,
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    devtool: prod ? false: 'source-map'
};

[DougAnderson444]

I am getting the same error. I can't figure out how to get the css to preprocess before tailwind sees it. Someone smarter than me at css/webpack needs to step in.

[Kiho]

Check this repository https://github.com/Kiho/smelte-template-webpack

[debugpoint136]

ok awesome! that works ! thanks @Kiho

[abhijitgujar86]

@Kiho Thanks . It works. I have a question is there any limitations that i should know ? I think this should be added to read me.

[Taha-Firoz]

Can we discuss possible snowpack support?