svelte-preprocess
svelte-preprocess copied to clipboard
Svelte kit + PostCSS how to check if code is taking effect.
this is my svelte config file
import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import autoprefixer from 'autoprefixer';
import cssnanoPlugin from 'cssnano';
import postcssPurgecss from '@fullhuman/postcss-purgecss';
import postcssPresetEnv from 'postcss-preset-env';
const preprocessOptions = {
sourceMap: true, // "you would always want sourcemaps for the IDE" – dummdidumm
defaults: {
script: 'typescript',
style: 'postcss'
},
postcss: {
plugins: [
// import('autoprefixer')(),
// import('cssnano')(),
// import('@fullhuman/postcss-purgecss')(),
// import('postcss-preset-env'),
// import('postcss-import'),
// import('postcss-cssnext'),
// import('postcss-load-config')
autoprefixer,
cssnanoPlugin
// postcssPurgecss(),
// postcssPresetEnv
]
}
};
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(preprocessOptions),
kit: {
adapter: adapter()
}
};
export default config;
And this is my svelte code
<h1>Welcome to SvelteKit <span>red</span></h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<div class="image">tests</div>
<style>
h1 {
color: black;
}
p {
color: red;
}
::placeholder {
color: gray;
}
.image {
background-image: url([email protected]);
}
@media (min-resolution: 2dppx) {
.image {
background-image: url([email protected]);
}
}
</style>
When i'm looking in the browser it doesn't seem this is taking effect, any ideas?