๋ฒ๊ทธ ์ค๋ช
Svelte ๊ตฌ์ฑ ์์์ VS Code์์ ์๋ก์ด CSS ๊ตฌ๋ฌธ ๊ธฐ๋ฅ Media Queries Level 4 ๋ฅผ ์ฌ์ฉํ ๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ์ต๋๋ค.
<style>
<strong i="9">@media</strong> (width >= 768px) { // <--- error line
.nav {
padding: 16px 24px;
}
}
</style>
์ต์ Sapper ๋ฒ์ ์ ์ฌ์ฉํฉ๋๋ค.
// ...
"sapper": "^0.27.15",
"svelte": "^3.23.2"
}
๊ทธ๋ฌ๋ Svelte linter๋ ํญ์์ด ์ค๋ฅ๋ฅผ ํ์ํฉ๋๋ค (๋ํ ์คํฌ๋ฆฐ ์ท 1 ์ฐธ์กฐ).
Colon is expected. If you expect this syntax to work, here are some suggestions:
If you use less/SCSS with `svelte-preprocessor`, did you add `lang="scss"`/`lang="less"`
to you `style` tag? If you use SCSS, it may be necessary to add the path to your NODE
runtime to the setting `svelte.language-server.runtime`, or use `sass` instead of `node-sass`.
Did you setup a `svelte.config.js`? See https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#using-with-preprocessors
for more info.svelte(css-syntax-error)
์ข์ต๋๋ค. ์ผ๋ฐ *.css
ํ์ผ์์์ด ์ค๋ฅ๊ฐ ํ์๋์ง๋ง VS Code CSS ์ ํจ์ฑ ๊ฒ์ฌ ์ค์ css.validate
๋ฅผ false
ํ๋ฉด์ด ์ค๋ฅ๊ฐ ์ฌ๋ผ์ง๋๋ค.
svelte.plugin.css.diagnostics.enable
๋ฅผ false
๋ก ์ค์ ํ๋ ค๊ณ ํ์ง๋ง ์ฌ์ ํ Svelte์ css-syntax-error
๋ฉ์์ง๊ฐ ํ์๋ฉ๋๋ค (์คํฌ๋ฆฐ ์ท 2 ์ฐธ์กฐ).
์ฌํํ๋ ค๋ฉด
๋์์ ์ฌํํ๋ ๋จ๊ณ :
*.svelte
๊ตฌ์ฑ ์์์ <style>...</style>
์ ์ CSS ๊ตฌ๋ฌธ ์ถ๊ฐ์์๋๋ ํ๋
์ CSS ๊ตฌ๋ฌธ์ ์ถ๊ฐ ํ ํ ์ค๋ฅ๊ฐ ์์ต๋๋ค.
์คํฌ๋ฆฐ ์ท
์์คํ (๋ค์ ์ ๋ณด๋ฅผ ์์ฑํ์ญ์์ค) :
VS ์ฝ๋ ๋ฐ ๋ ธ๋ ๋ฒ์ :
Version: 1.46.0
Commit: a5d1cc28bb5da32ec67e86cc50f84c67cc690321
Date: 2020-06-10T08:59:06.977Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 18.7.0
์ถ๊ฐ ์ปจํ
์คํธ
๊ฐ๋ฅํ ํด๊ฒฐ์ฑ
์ <style lang="...">...</style>
์์ฑ์ ํน๋ณํ ๊ฐ์ ์ถ๊ฐํ์ฌ ๋ชจ๋ ์๋ก์ด CSS ๊ธฐ๋ฅ์ ์ง์ํ๋๋ก ํ์ฉํ๋ ๊ฒ์
๋๋ค. _ ๋์ UX /๋ณด๊ธฐ ๋ฌธ์ _ ์ผ ๋ฟ์ด ๊ธฐ ๋๋ฌธ์
๋๋ค.
npm run build
์ดํ์ ๋ชจ๋ ์ ๊ตฌ๋ฌธ์ postcss-media-minmax
ํ๋ฌ๊ทธ์ธ์์ ๋ค์๊ณผ ๊ฐ์ด ์ด์ CSS ๊ตฌ๋ฌธ์ผ๋ก ์ฒ๋ฆฌ๋ฉ๋๋ค.
<strong i="61">@media</strong> (width >= 768px) ---> <strong i="62">@media</strong> (min-width: 786px)
์ด๊ฒ์ ๋ฐ๋ผ ์ ์ฒ๋ฆฌ๋ฅผ ์ค์ ํ๊ณ svelte ์ค๋ฅ๊ฐ ์ฌ์ ํ ์กด์ฌํ๋์ง ํ์ธํ ์ ์์ต๋๊น? ๋น๋ ์ค์ ๊ณผ ๋น์ทํด์ผํ๋ฉฐ, ๊ฒฝ์ฐ์๋ postcss ์ฌ์ผํฉ๋๋ค.
css ์ค๋ฅ๋ vscode์ css ์ธ์ด ์๋น์ค๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฏ๋ก์ด ๊ตฌ๋ฌธ์ ์ง์ํ ๋๊น์ง ํ ์์๋ ์ผ์ด ๋ง์ง ์์ต๋๋ค.
ํธ์ ๋ด์ ๊ฐ๊ธฐ ๋ต๋ณ ๊ฐ์ฌํฉ๋๋ค.
์ด๊ฒ์ Sapper์ rollup.config.js
์
๋๋ค.
import resolve from "@rollup/plugin-node-resolve";
import replace from "@rollup/plugin-replace";
import commonjs from "@rollup/plugin-commonjs";
import svelte from "rollup-plugin-svelte";
import babel from "@rollup/plugin-babel";
import { terser } from "rollup-plugin-terser";
// Import svelte-preprocess
import sveltePreprocess from "svelte-preprocess";
// Import PostCSS plugins
import autoprefixer from "autoprefixer";
import pimport from "postcss-import";
import minmax from "postcss-media-minmax";
import csso from "postcss-csso";
import config from "sapper/config/rollup.js";
import pkg from "./package.json";
const mode = process.env.NODE_ENV;
const dev = mode === "development";
const legacy = !!process.env.SAPPER_LEGACY_BUILD;
const onwarn = (warning, onwarn) =>
(warning.code === "CIRCULAR_DEPENDENCY" &&
/[/\\]@sapper[/\\]/.test(warning.message)) ||
onwarn(warning);
// Define svelte-preprocess
const preprocess = sveltePreprocess({
postcss: {
plugins: [pimport, minmax, autoprefixer, csso], // --> add PostCSS plugins
},
});
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
"process.browser": true,
"process.env.NODE_ENV": JSON.stringify(mode),
}),
svelte({
dev,
preprocess, // --> add sveltePreprocess
hydratable: true,
emitCss: true,
}),
resolve({
browser: true,
dedupe: ["svelte"],
}),
commonjs(),
legacy &&
babel({
extensions: [".js", ".mjs", ".html", ".svelte"],
babelHelpers: "runtime",
exclude: ["node_modules/@babel/**"],
presets: [
[
"@babel/preset-env",
{
targets: "> 0.25%, not dead",
},
],
],
plugins: [
"@babel/plugin-syntax-dynamic-import",
[
"@babel/plugin-transform-runtime",
{
useESModules: true,
},
],
],
}),
!dev &&
terser({
module: true,
}),
],
preserveEntrySignatures: false,
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
"process.browser": false,
"process.env.NODE_ENV": JSON.stringify(mode),
}),
svelte({
generate: "ssr",
preprocess, // --> add sveltePreprocess
dev,
}),
resolve({
dedupe: ["svelte"],
}),
commonjs(),
],
external: Object.keys(pkg.dependencies).concat(
require("module").builtinModules ||
Object.keys(process.binding("natives"))
),
preserveEntrySignatures: "strict",
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
"process.browser": true,
"process.env.NODE_ENV": JSON.stringify(mode),
}),
commonjs(),
!dev && terser(),
],
preserveEntrySignatures: false,
onwarn,
},
};
๋ด๊ฐ ํ๋ ธ๋ค๋ฉด ์ ์ ํด์ฃผ์ธ์.ํ์ง๋ง rollup.config.js
๋ฅผ ์ฌ์ฉํ๋ฉด sveltePreprocess({...})
์ค์ ๋ง์ผ๋ก ๋ณ๋์ svelte.config.js
ํ์ผ์ ๋ง๋ค ํ์๊ฐ ์์ต๋๊น? ๐ค
I๋ฅผ ์ค์ ํ๋ฉด lang
(๋๋ type
์ํ) ์์ฑ <style>
์ postcss
(๋๋ text/postcss
) I ๋งค์ฐ ๋์ผํ ์ค์ฐจ๋ฅผ ์ฐธ์กฐ ๋ชจ๋ CSS ์ฝ๋์ ์ด์ํ ๊ตฌ๋ฌธ ๊ฐ์กฐ ํ์ :
์ ์ฒ๋ฆฌ ์น์ ์ svelte.config.js๋ก ๋ณต์ฌํ๊ฑฐ๋ svelte.config.js๋ก ์ด๋ํ๊ณ ๋น๋ ๊ตฌ์ฑ์์ ์๊ตฌํ์ญ์์ค. ์ธ์ด ์๋ฒ๋ svelte๋ฅผ ์ฌ์ฉํ์ฌ ๋ด๋ถ์ ์ผ๋ก ์ฝ๋๋ฅผ ์ปดํ์ผํ๋ฏ๋ก ์ฌ์ ์ฒ๋ฆฌ๋ ์์์ผํฉ๋๋ค.
@ jasonlyu123 ๊ฐ์ฌํฉ๋๋ค! ์ด๊ฒ์ ์ค๋ฅ๋ฅผ ํด๊ฒฐํฉ๋๋ค.
// svelte.config.js
const sveltePreprocess = require("svelte-preprocess");
const autoprefixer = require("autoprefixer");
const pimport = require("postcss-import");
const minmax = require("postcss-media-minmax");
const csso = require("postcss-csso");
module.exports = {
preprocess: sveltePreprocess({
postcss: {
plugins: [pimport, minmax, autoprefixer, csso],
},
}),
};
๊ทธ๋ฌ๋ ์ด์ ๊ณผ ๊ฐ์ด ์ผ๋ฐ CSS๋ก ๊ตฌ๋ฌธ์ ๊ฐ์กฐํ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น?
CSS์ postcss ํน์ ๊ตฌ๋ฌธ์ด์๋ ๊ฒฝ์ฐ. lang ์์ฑ์ ์ ๊ฑฐ ํ ์ ์์ต๋๋ค.
ํธ์ ๋ด์ ๊ฐ๊ธฐ
์ถ๊ฐ๋ก์ด CSS ์ค๋ฅ๋ฅผ ์ญ์ ํ๊ธฐ ์ํด svelte.plugin.css.diagnostics.enable
๋ฅผ false
ํ์ต๋๋ค.
) expectedcss(css-rparentexpected)
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
ํธ์ ๋ด์ ๊ฐ๊ธฐ
์ถ๊ฐ๋ก์ด CSS ์ค๋ฅ๋ฅผ ์ญ์ ํ๊ธฐ ์ํด
svelte.plugin.css.diagnostics.enable
๋ฅผfalse
ํ์ต๋๋ค.