Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack + Sapper + Tailwind
{
"scripts": {
"dev": "sapper dev",
"format:check": "prettier --check './**/*.{js,ts,css,html,svelte}'",
"format": "prettier --write './**/*.{js,ts,css,html,svelte}'",
"build": "NODE_ENV=production sapper build",
"export": "NODE_ENV=production sapper export",
"start": "node __sapper__/build",
"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run",
},
"dependencies": {
"@fortawesome/free-regular-svg-icons": "^5.8.2",
"@fortawesome/free-solid-svg-icons": "^5.8.2",
"fa-svelte": "^3.0.0"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^1.2.0",
"@tailwindcss/custom-forms": "^0.1.4",
"compression": "^1.7.1",
"css-loader": "^2.1.1",
"cssnano": "^4.1.10",
"firebase-tools": "^6.10.0",
"isomorphic-style-loader": "^5.0.1",
"mini-css-extract-plugin": "^0.6.0",
"npm-run-all": "^4.1.5",
"polka": "^0.5.0",
"postcss": "^7.0.16",
"postcss-extend": "^1.0.5",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.6.0",
"prettier": "^1.17.1",
"prettier-plugin-svelte": "^0.6.0",
"purgecss-from-svelte": "^1.1.1",
"sapper": "^0.27.0",
"sirv": "^0.4.0",
"svelte": "^3.0.0",
"svelte-loader": "^2.9.0",
"svelte-preprocess": "^2.9.0",
"tailwindcss": "^1.0.1",
"webpack": "^4.32"
}
}
const purgecss = require('@fullhuman/postcss-purgecss');
const purgeSvelte = require('purgecss-from-svelte');
const env = process.env.NODE_ENV;
// Custom PurgeCSS extractor for Tailwind that allows special characters in
// class names.
//
// https://github.com/FullHuman/purgecss#extractor
class TailwindExtractor {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
}
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-preset-env')({
browsers: 'last 2 versions',
}),
require('tailwindcss')('./tailwind.config.js'),
require('postcss-extend')(),
require('autoprefixer')(),
...(env !== 'production'
? []
: [
purgecss({
content: ['**/*.html'],
css: ['**/*.css'],
extractors: [
{
extractor: purgeSvelte,
extensions: ['svelte'],
},
{
extractor: TailwindExtractor,
// Specify the file extensions to include when scanning for
// class names.
extensions: ['html'],
},
],
}),
require('cssnano')({ preset: 'default' }),
]),
],
};
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
theme: {
},
variants: {
// Some useful comment
},
plugins: [
// Some useful comment
],
};
const webpack = require('webpack');
const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');
const autoPreprocess = require('svelte-preprocess');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const mode = process.env.NODE_ENV;
console.log(mode);
const dev = mode === 'development';
const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
const mainFields = ['svelte', 'module', 'browser', 'main'];
const cssConfig = {
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [
'isomorphic-style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
],
};
const sveltPreprocess = autoPreprocess({
postcss: true,
scss: false,
stylus: false,
typescript: false,
coffeescript: false,
less: false,
pug: false,
});
module.exports = {
client: {
entry: config.client.entry(),
output: config.client.output(),
resolve: { extensions, mainFields },
module: {
rules: [
cssConfig,
{
test: /\.(svelte|html)$/,
use: {
loader: 'svelte-loader',
options: {
preprocess: sveltPreprocess,
dev,
hydratable: true,
hotReload: false, // pending https://github.com/sveltejs/svelte/issues/2377
},
},
},
],
},
mode,
plugins: [
// pending https://github.com/sveltejs/svelte/issues/2377
// dev && new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
new MiniCssExtractPlugin({
filename: '[name].[hash:5].css',
chunkFilename: '[id].[hash:5].css',
}),
].filter(Boolean),
devtool: dev && 'inline-source-map',
},
server: {
entry: config.server.entry(),
output: config.server.output(),
target: 'node',
resolve: { extensions, mainFields },
externals: Object.keys(pkg.dependencies).concat('encoding'),
module: {
rules: [
cssConfig,
{
test: /\.(svelte|html)$/,
use: {
loader: 'svelte-loader',
options: {
preprocess: sveltPreprocess,
css: false,
generate: 'ssr',
dev,
},
},
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash:5].css',
chunkFilename: '[id].[hash:5].css',
}),
].filter(Boolean),
mode: process.env.NODE_ENV,
performance: {
hints: false, // it doesn't matter if server.js is large
},
},
serviceworker: {
entry: config.serviceworker.entry(),
output: config.serviceworker.output(),
mode: process.env.NODE_ENV,
},
};
@rhazz

This comment has been minimized.

Copy link

@rhazz rhazz commented Apr 2, 2020

please, is it necessary more any configuration?

@LucianVoju

This comment has been minimized.

Copy link

@LucianVoju LucianVoju commented May 14, 2020

It brakes.Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:52)
at async preprocess (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26757:19)
Error: No PostCSS Config found in: /Users/lucian.voju/projects/pbk/pb/pb-new-setup
at /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/postcss-load-config/src/index.js:91:15
at async Object.transformer [as postcss] (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/transformers/postcss.js:1:889)
at async style (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte-preprocess/dist/autoProcess.js:1:2658)
at async /Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26761:32
at async Promise.all (index 0)
at async replace_async (/Users/lucian.voju/projects/pbk/pb/pb-new-setup/node_modules/svelte/compiler.js:26716:5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment