是什么原因导致在此苗条的应用程序中编译 SASS 失败?

Question

我正在使用Svelte和材料设计库Svelte Material UI进行一个项目。

这个材料设计库需要 SASS，所以我用npm install svelte-preprocess安装了一个预处理器，并在 rollup.config.js 中添加了preprocess: autoPreprocess()。所以我现在有：

plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css');
},
preprocess: autoPreprocess()
}),
routify({ singleBuild : true}),
replace({
// stringify the object
APPENV: JSON.stringify({         
isProd: production,
...config().parsed // attached the .env config            
}),
}),
// more stuff
]

我有一个包含此内容的文件smui.js：

import Button from '@smui/button';
import Checkbox from '@smui/checkbox';
import Chips from '@smui/chips';
import Dialog from '@smui/dialog';
import FormField from '@smui/form-field';
import Select from '@smui/select';
export {
Button,
Checkbox,
Chips,
Dialog,
FormField,
Select
}

在我的index.svelte 文件中，我以这种方式导入上述内容：import * as Smui from "../smui.js";.

我得到的不是包含应用程序应运行的端口的成功消息，而是

：

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
node_modules@smuidialog_index.scss (1:0)
1: @import "smui-theme";
^
2: @import "./style";
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)

我做错了什么？

Answer 1

我遇到了同样的问题，不知何故我设法用rollup-plugin-postcss插件解决了这个问题。使用以下代码更新您的rollup.config.js，您应该在其中一个 sass 目录中具有_smui-theme.scss。

import postcss from 'rollup-plugin-postcss'
...
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css')
}
}),
postcss({
extensions: ['.css'],
extract: true,
minimize: true,
use: [['sass', { includePaths: ['./src/(yoursass-directory-name)', './node_modules'] }]]
})

Answer 2

我从未使用@import从 NPM 包导入组件，但在您引用的自述包中，它建议使用"从"苗条材料导入 x"。还要注意，您引用的包不支持 svelte-preprocess，请查看自述文件：

要将其捆绑在您自己的代码中，请使用 Sass 处理器(不是 Sass Svelte 预处理器，而是 Sass 处理器(。