如何使用 rollup 从 @material 导入 scss 文件？

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";

我和...更近了一点

错误：找不到或无法读取要导入的文件：@material/elevation/mixins。

如何让它识别没有扩展名的文件以便其他导入工作？

Answer 1

我让它像这样工作......

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