Как импортировать файлы s css из @material, используя накопительный пакет?

Question

У меня есть простой накопительный проект, который имеет следующую структуру

src
  index.mjs
  style.sass
package.json
rollup.config.mjs

В моем накопительном файле я создаю плагин следующим образом ...

const pcss = postcss({
    preprocessor: (content, id) => new Promise((resolve, reject) => {
      const result = sass.renderSync({
        file: id,
        includePaths: ["src", "node_modules"]
      })
      resolve({ code: result.css.toString() })
    }),
    plugins: [
      autoprefixer
    ],
    extensions: ['.sass', '.scss']
})

Тогда у меня есть простой импортировать в мой файл Sass, как это ...

@import "@material/button/mdc-button";

Но когда я запускаю это, я получаю ...

Error: File to import not found or unreadable: @material/button/mdc-button.
  at options.error (/Users/jackiegleason/Code/jrg-material/packages/components/node_modules/node-sass/lib/index.js:291:26)

Если я изменяю на

@import "~@material/button/mdc-button";

Я становлюсь немного ближе с ...

Ошибка: файл для импорта не найден или не читается: @ материал / высота / mixins.

Как мне его получить распознать файлы без расширения, чтобы работал другой импорт?

Answer 1

У меня это работает так ...

const pcss = postcss({
    modules: true,
    extensions: ['.sass', '.scss'],
    namedExports: true,
    plugins: [
        autoprefixer
    ],
    use: [
        [
            'sass', {
                includePaths: [path.resolve('node_modules')]
            }
        ]
    ]
})