Rollup multiple .scss, .sass and .css imports
npm install rollup-plugin-scss```
npm install --save-dev rollup-plugin-scss sass
If any of them is installed, it will be used automatically, if both installed sass will be used.
`js
// rollup.config.js
import scss from 'rollup-plugin-scss'
export default {
input: 'input.js',
output: {
file: 'output.js',
format: 'esm',
// Removes the hash from the asset filename
assetFileNames: '[name][extname]'
},
plugins: [
scss() // will output compiled styles to output.css
]
}
// OR
export default {
input: 'input.js',
output: { file: 'output.js', format: 'esm' },
plugins: [
scss({ fileName: 'bundle.css' }) // will output compiled styles to "bundle.css"
]
}
// OR
export default {
input: 'input.js',
output: { file: 'output.js', format: 'esm' },
plugins: [
scss() // will output compiled styles to "assets/output-123hash.css"
]
}
`
`js`
// entry.js
import './reset.scss'
Options are passed to the sass compiler ([node-sass] by default). Refer to the Sass docs for more details on these options.
One notable option is indentedSyntax which you'll need if you're parsing Sass syntax instead of Scss syntax. (e.g. when extracting a Vue