バグを説明する
SvelteコンポーネントのVSCodeで新しいCSS構文機能のメディアクエリレベル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リンターは常にこのエラーを表示します(スクリーンショット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)
OK、通常の*.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言語サービスを使用しているため、この構文をサポートするまで、できることはほとんどありません。
@ jasonlyu123こんにちは! 返信ありがとうございます。
これは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
ファイルを作成する必要はありませんか? 🤔
私が設定されている場合はlang
(またはtype
のための)属性<style>
にpostcss
(またはtext/postcss
)、私は非常に同じエラーとを参照してくださいすべての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属性を削除できます。
@ jasonlyu123 thx!
さらに、このCSSエラーを削除するためにsvelte.plugin.css.diagnostics.enable
をfalse
しました。
) expectedcss(css-rparentexpected)
最も参考になるコメント
@ jasonlyu123 thx!
さらに、このCSSエラーを削除するために
svelte.plugin.css.diagnostics.enable
をfalse
しました。