Javascript 在这个小巧的应用程序中编译SASS失败的原因是什么？

我正在与Svelte和材料设计库一起进行一个项目

这个材质设计库需要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.svelt

e文件中，我以这种方式导入上面的内容：

import*作为Smui从“./Smui.js”导入

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

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
node_modules\@smui\dialog\_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)

我做错了什么？
我从未使用@import从NPM包导入组件，但在您引用的自述文件包中，它建议使用“从“svelte material”导入x”。另外请注意，您引用的包不支持svelte预处理，请查看自述文件：

要将其捆绑到您自己的代码中，请使用Sass处理器（不是Sass Svelte预处理器，而是Sass处理器）。
我从未使用@import从NPM包导入组件，但在您引用的自述文件包中，它建议使用“从“Svelte material”导入x”。还要注意，您引用的软件包不支持svelte preprocess，请查看自述：

要将其捆绑到您自己的代码中，请使用Sass处理器（不是Sass Svelte预处理器，而是Sass处理器）。
我也遇到了同样的问题，我设法用
汇总插件postsss
插件解决了这个问题。使用以下代码更新您的
rollup.config.js
，您的其中一个sass目录中应该有
\u 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'] }]]
        })

我也有同样的问题，我设法用
rollup plugin postss
plugin解决了这个问题。使用以下代码更新您的
rollup.config.js
，您的其中一个sass目录中应该有
\u 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'] }]]
        })

您是如何将SAS包含在苗条组件中的？您是如何将SAS包含在苗条组件中的？我在问题中添加了详细信息。请看一看。我在问题中添加了细节。请看一看。有了这个配置更改，我又遇到了一个问题。组件CSS和其他CSS样式不适用。我认为这个插件覆盖了CSS，但是我不确定这个配置的改变，我又遇到了一个问题。组件CSS和其他CSS样式不适用。我认为这个插件覆盖了CSS，但我不确定