Что вызывает сбой при компиляции SASS в этом изящном приложении? - PullRequest
Новая
       165

Что вызывает сбой при компиляции SASS в этом изящном приложении?

0 голосов
/ 21 июня 2020

Я работаю над проектом с 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.svelt e файле я импортирую указанное выше следующим образом: 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)

Что я делаю не так?

Ответы [ 2 ]

2 голосов
/ 30 июня 2020

У меня была такая же проблема, и каким-то образом мне удалось исправить это с помощью плагина 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'] }]]
        })
0 голосов
/ 21 июня 2020

Я никогда не использовал @import для импорта компонентов из пакета NPM, но в пакете readme, на который вы ссылаетесь, он рекомендует использовать 'import x from «svelte-material». Также обратите внимание, что svelte-preprocess выиграл Если пакет, на который вы ссылаетесь, не поддерживается, ознакомьтесь с файлом readme:

Чтобы связать это в своем собственном коде, используйте процессор Sass (не препроцессор Sass Svelte, а процессор Sass).

...