Sass 苗条3罐'；不编译SCS

我想在我的苗条应用程序中使用SCS。为此，我决定使用这个软件包。因此，这是

App.svelte

组件：

你好，世界！
主要{
文本对齐：居中；
填充：1em；
最大宽度：240px；
保证金：0自动；
.轰{
颜色：#ff3e00；
文本转换：大写；
字号：4em；
字号：100；
}
}
@介质（最小宽度：640像素）{
主要{
最大宽度：无；
}
}

这是

package.json

文件中的依赖项列表：

    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@rollup/plugin-replace": "^2.3.4",
    "node-sass": "^5.0.0",
    "rollup": "^2.34.0",
    "rollup-plugin-css-only": "^3.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-serve": "^1.1.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.30.0",
    "svelte-preprocess": "^4.6.1"

这是

rollup.config.js

文件：

    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "@rollup/plugin-replace": "^2.3.4",
    "node-sass": "^5.0.0",
    "rollup": "^2.34.0",
    "rollup-plugin-css-only": "^3.0.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-serve": "^1.1.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.30.0",
    "svelte-preprocess": "^4.6.1"

从“汇总插件svelte”导入svelte；
从“@rollup/plugin commonjs”导入commonjs；
从“@rollup/plugin node resolve”导入解析；
从“汇总插件livereload”导入livereload；
从'rollup plugin terser'导入{terser}；
//从“仅限汇总插件css”导入css；
从“汇总插件服务”导入服务；
从“@rollup/plugin replace”导入replace；
从“svelte预处理”导入sveltePreprocess；
const isDevelopment=process.env.APP_env==“开发”；
导出默认值{
输入：“src/index.js”，
输出：{
sourcemap:false，
格式：“iLife”，
名称：“应用程序”，
文件：“public/js/bundle.js”
},
插件：[
苗条的({
编译器选项：{
dev:isDevelopment，
},
预处理：SvelteProcess（），
}),
//css（{output:'bundle.css'}），
决心({
浏览器：是的，
重复数据消除：['svelte']，
}),
commonjs（），
替换({
IS_发展：ISD发展，
}),
isd开发与服务({
contentBase:'公共'，
历史上的倒退：是的，
主持人：“0.0.0.0”，
端口：process.env.port | | 5000，
标题：{
“访问控制允许来源”：“*”，
},
}),
isDevelopment&livereload（“公共”），
！isDevelopment&&terser（），
],
观察：{
屏幕：错误，
},
};

我遵循了该软件包中的说明，但当我尝试构建应用程序时，控制台中出现以下错误：

rollup v2.34.0
bundles src/index.js → public/js/bundle.js...
[!] Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)
src/cmp/App/index.css (1:13)
1: main.svelte-1xjph0n.svelte-1xjph0n{text-align:center;padding:1em;max-width:240px;margin:0 auto}main.svelte-1xjph0n .boom.svelte-1xjph0n{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1xjph0n.svelte-1xjph0n{max-width:none}}
                ^
Error: Identifier directly after number (Note that you need plugins to import files that are not JavaScript)

---

我想这是汇总配置或某个依赖项版本的问题。但是如何理解它以及如何解决这个问题呢？

问题在于你在rollup.config.js中注释掉

css（{output:'bundle.css'}），

，并在rollup.config.js中注释掉

css（{output:'bundle.css'}），

，有了这条线路，一切都正常了。

Stephane，非常感谢！你说得对，这很有帮助。我故意评论那句话。因为以前（使用旧的依赖项）一切都很好。Stephane，非常感谢！你说得对，这很有帮助。我故意评论那句话。因为以前（使用旧的依赖项）一切都很好。