npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@astappiev/rollup-plugin-scss

v3.0.6

Published

Rollup multiple .scss, .sass and .css imports

Downloads

206

Readme

Rollup multiple .scss, .sass and .css imports

WARNING: This is a fork with some changes required for personal needs.

New features includes:

  • remove node-sass from dependencies, auto-recognize sass library from installed modules
  • generate source map for build

If my PR will be merged or similar functionality will be implemented in original project, this project will be deleted without notice.

Installation

# Rollup v0.60+ and v1+
npm install --save-dev @astappiev/rollup-plugin-scss

# Rollup v0.59 and below
npm install --save-dev rollup-plugin-scss@0

Since v3, you have to install Sass compiler manually:

# Node Sass (deprecated)
npm install --save-dev node-sass

# Dart Sass
npm install --save-dev sass

If any of them is installed, it will be used automatically, if both installed node-sass will be used.

Usage

// rollup.config.js
import scss from 'rollup-plugin-scss'

export default {
  input: 'input.js',
  output: {
    file: 'output.js',
    format: 'esm'
  },
  plugins: [
    scss() // will output compiled styles to output.css
  ]
}
// entry.js
import './reset.scss'

Options

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 <style lang="sass"> tag) By default the plugin will base the filename for the css on the bundle destination.

scss({
  // Choose *one* of these possible "output:..." options
  // Default behaviour is to write all styles to the bundle destination where .js is replaced by .css
  output: true,

  // Filename to write all styles to
  output: 'bundle.css',

  // Callback that will be called ongenerate with two arguments:
  // - styles: the contents of all style tags combined: 'body { color: green }'
  // - styleNodes: an array of style objects: { filename: 'body { ... }' }
  output: function (styles, styleNodes) {
    writeFileSync('bundle.css', styles)
  },

  // Disable any style output or callbacks, import as string
  output: false,
  
  // Enables/disables generation of source map (default: false) 
  sourceMap: true,

  // Choose files to include in processing (default: ['/**/*.css', '/**/*.scss', '/**/*.sass'])
  include: [],
  
  // Choose files to exclude from processing (default: undefined) 
  exclude: [],

  // Determine if node process should be terminated on error (default: false)
  failOnError: true,

  // Prefix global scss. Useful for variables and mixins.
  prefix: `@import "./fonts.scss";`,

  // A Sass (node-sass compatible) compiler to use
  // - node-sass and sass packages are picked up automatically
  // - you can use this option to specify custom package (e.g. a fork of one of them)
  sass: require('sass'),

  // Run postcss processor before output
  processor: () => postcss([autoprefixer({ overrideBrowserslist: "Edge 18" })]),

  // Process resulting CSS
  processor: (css, map) => ({ css: css.replace('/*date*/', '/* ' + new Date().toJSON() + ' */'), map }),

  // Add file/folder to be monitored in watch mode so that changes to these files will trigger rebuilds.
  // Do not choose a directory where rollup output or dest is pointed to as this will cause an infinite loop
  watch: 'src/styles/components',
  watch: ['src/styles/components', 'src/multiple/folders'],
})

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Contributions and feedback are very welcome.

To get it running:

  1. Clone the project.
  2. npm install

Credits

License

The MIT License (MIT). Please see License File for more information.