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?