Documentation about global styles #377
Comments
|
I think that this is because it's not Sapper specific: |
|
@Crisfole sure, but I think it might be worth a tiny mention in the docs. I'd be even happier, if I could just drop a |
|
It would be great to see Sass/Postcss/Less/whatever end up with "official" support in Sapper, in the box rather than something that you can discover how to add yourself; and even better that it would also process global files. (The fewer the ad hoc per project settings needed, the easier it is to keep up with progress in the underlying platform. Complex, subtle, bespoke, artisanal webpack configuration can be a source of technical challenge and joy, but it is a financial tar pit.) |
|
@kylecordes - I had a similar issue with the Svelte starter template: it looks like the workaround I used there can work in the Sapper template (though I've no idea if this is the Right Way™ to do this). I'll document it here in case it's useful to anyone - or someone can point me to a better approach ;). If using Rollup:
I'm still feeling my way around Rollup; but I think the import in client.js triggers the appropriate processor for that file; and this is configured to output the file to Hopefully didn't miss anything - I'll double-check later. |
|
@blindfish3 sorry to necro this, but what do you import in order to add |
|
@Bandit - no worries. I have the following in my current rollup.config.js (I've removed a lot that's not relevant): // this is for preprocessing sass in .svelte files
import { sass as sv_sass } from "svelte-preprocess-sass";
// this is what you want for globals.css:
import sass from "rollup-plugin-sass";
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
// ...
sass({
// update includePaths to what suits.
// node_modules is probably only necessary if you need to import from a css library
includePaths: ["./src/styles", "node_modules"],
output: "static/global.css"
}),
svelte({
dev,
hydratable: true,
emitCss: true,
preprocess: {
style: sv_sass({
includePaths: ["./src/styles", "node_modules"],
})
}}),
// ...
]Note that in .svelte files you need to declare that you want sass by adding an attribute to the style tag: <style type="text/sass">Both globals and .svelte preprocessing works for me; though I haven't seen the most recent version of the sapper template so things may have changed... |
|
For unknown reason, Svelte / Sapper removes part of my needed CSS from global.css. Everything outside of _layout.svelte, ex. reset (using *) and styles for html, body and div#svelte. Everything is valid CSS. |
|
@tewdin that seems like a bug report. You'll definitely want to report it here. It'd be super helpful if you posted a copy of the global.css as it exists in your directory and as you're seeing it in the browser's Network tab (in the developer console). |
I have Tried your way global.css is not getting genrated |
It works for me with the latest version of the sapper template. If you took my quoted post in isolation you probably missed the instructions in my earlier post - especially:
One thing worth noting: live-refresh isn't working on changes to global.scss: I have to hard refresh the browser. I didn't look into this further as I can't imagine making frequent changes to global css. |
|
@blindfish3 way works well! thanks dude |
|
I wanted a convenient way to get PostCSS working with // preprocessPostCSS.js
const fs = require('fs');
const postcss = require('postcss');
const postcssrc = require('postcss-load-config');
const chokidar = require('chokidar');
const path = require('path');
const ctx = { parser: true, map: 'inline' };
export default function processPostCSS(input, output) {
var dir = path.dirname(input);
chokidar.watch(input).on('all', (event, path) => {
fs.readFile(input, (err, css) => {
postcssrc(ctx).then(({ plugins, options }) => {
postcss(plugins).process(css, { from: input, to: output }).then((result) => {
fs.writeFile(output, result.css, () => true);
if (result.map) {
fs.writeFile(output + '.map', result.map, () => true);
}
});
});
});
});
}Then in your Sapper Rollup config import and call the function. // rollup.config.js
import processPostCSS from './preprocessPostCSS;
// ...
// processPostCSS(input, output)
processPostCSS('src/styles/index.css', 'static/global.css');Technically it doesn't have to be inside the rollup config. It could be in a separate file. To enable hot reloading, add the following inside your Rollup config as well and change the directory to watch. // rollup.config.js
import glob from 'glob`;
export default {
server: {
plugins: [
{
buildStart() {
var self = this;
var dir = 'src/styles/'
glob(dir + '**/*', null, function (er, files) {
files.forEach((file) => {
self.addWatchFile(file);
});
});
}
}
// ...
]
}
}Remember to add a // postcss.config.js
module.exports = {
plugins: {
'postcss-import': {}
}
}; |
|
You can do that quite simple by using The following example also utilizes SASS styles. In your So apart from SASS we're enabling And just use that variable in plugins section Then anywhere where you want to use global styles just wrap styles in Or just add |
|
Any caveats when using Also, this errors out for me with |
|
I'm getting the same EDIT: I was missing postcss. |
Currently there's not a single word about global styles in the docs.
However, in the Sapper starter app there is a file named
global.cssin theassetsfolder with some basic reset CSS, so I'm assuming the current preferred way is to just drop the file in the folder and be done with it.This could be improved (#357) or at least documented.
The text was updated successfully, but these errors were encountered: