CODEWITHSUNDEEP
sassrollupnode-sass
Jackie
Jackie

Reputation: 23597

How do I import scss files from @material using rollup?

I have a simple rollup project that has the following structure

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

In my rollup file I create the plugin like this...

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

Then I have the simple import in my sass file like this...

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

But when I run this I get...

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)

If I change to 

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

I get a little closer with...

Error: File to import not found or unreadable: @material/elevation/mixins.

How do I get it to recognize the files without an extension so the other imports work?

Upvotes: 2

Views: 4111

Answers (1)

Jackie
Jackie

Reputation: 23597

I got it to work like this...

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

Upvotes: 5

Related Questions