Description
I'm not sure where this question belongs, but I'm having trouble using the bootstrap SCSS in my Svelte project over what appears to be inconsistent treatment of global SCSS.
The following code works fine, emitting no warnings:
<style lang="scss" global>
@import './values';
@import '../../node_modules/bootstrap/scss/bootstrap';
body {
box-sizing: content-box;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.content {
flex: auto;
margin: 0 $horizontalMargin;
}
</style>However, this code emits a bunch of warnings:
<style lang="scss">
@import './values';
:global {
@import '../../node_modules/bootstrap/scss/bootstrap';
body {
box-sizing: content-box;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
}
.content {
flex: auto;
margin: 0 $horizontalMargin;
}
</style>Here are the warnings, all complaining about unused CSS selectors:
I would like to be able to have global and local styles in my App.svelte component, but I don't see how to do that without getting these warnings. The compiler emits the warnings too.
Here's my rollup.config.js. I'm using Svelte with TypeScript and Electron:
import svelte from 'rollup-plugin-svelte'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import livereload from 'rollup-plugin-livereload'
import { terser } from 'rollup-plugin-terser'
import sveltePreprocess from 'svelte-preprocess'
import typescript from '@rollup/plugin-typescript'
import css from 'rollup-plugin-css-only'
const production = !process.env.ROLLUP_WATCH
function serve() {
let server
function toExit() {
if (server) server.kill(0)
}
return {
writeBundle() {
if (server) return
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
})
process.on('SIGTERM', toExit)
process.on('exit', toExit)
}
}
}
export default {
input: 'src/frontend/main.ts',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
preprocess: sveltePreprocess({ sourceMap: !production }),
compilerOptions: {
dev: !production
}
}),
css({ output: 'bundle.css' }),
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({
sourceMap: !production,
inlineSources: !production,
tsconfig: "src/frontend/tsconfig.json"
}),
!production && serve(),
!production && livereload('public'),
production && terser()
],
watch: {
clearScreen: false
}
}From package.json, in case you need to see the versions of things:
"devDependencies": {
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0",
"@tsconfig/svelte": "^2.0.0",
"@types/jest": "^27.0.2",
"@types/lodash": "^4.14.175",
"@types/page": "^1.11.5",
"cross-env": "^7.0.3",
"electron": "^15.2.0",
"jest": "^27.2.5",
"lodash": "^4.17.21",
"npm-run-all": "^4.1.5",
"postcss": "^8.3.11",
"prettier": "^2.4.1",
"readline-sync": "^1.4.10",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"sass": "^1.43.4",
"svelte": "^3.0.0",
"svelte-check": "^2.0.0",
"svelte-preprocess": "^4.0.0",
"ts-jest": "^27.0.6",
"tslib": "^2.0.0",
"typescript": "^4.0.0"
},
"dependencies": {
"@types/readline-sync": "^1.4.4",
"bootstrap": "^5.1.3",
"keytar": "^7.7.0",
"knex": "^0.95.11",
"mysql2": "^2.3.1",
"sirv-cli": "^1.0.0",
"source-map-support": "^0.5.20",
"svelte-modals": "^1.0.4",
"sveltestrap": "^5.6.3"
},Issue #374 appears to be related, but because that issue doesn't address the inconsistency between the two methods of specifying global CSS, it's not clear to me whether it's the same problem.
My workaround is to just make all CSS in App.svelte global, whether other components use the CSS or not.