时间戳

首页 > 解决方案 > 是什么导致在这个苗条的应用程序中编译 SASS 失败？

javascript - 是什么导致在这个苗条的应用程序中编译 SASS 失败？

问题描述

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

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

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\@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)

我究竟做错了什么？

标签： javascriptsveltesvelte-3

解决方案

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

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'] }]]
        })

推荐阅读