How to use rollup-plugin-sass - 7 common examples

To help you get started, we’ve selected a few rollup-plugin-sass examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github yanwsh / videojs-panorama / rollup.config.js View on Github external
'three'
    ],
    plugins: [
        babel({
            exclude: 'node_modules/**'
        }),
        resolve({
            jsnext: true, main: true, browser: true
        }),
        commonjs({
            include: /node_modules/
        }),
        replace({
            '__VERSION__': packagejson.version
        }),
        sass({
            output: false,
            insert: true,
            options: {
                importer: function importer(url, prev){
                    var regex = /^~/;
                    if (!url.match(regex)) {

                        var cssImportRegex = /^((\/\/)|(http:\/\/)|(https:\/\/))/;
                        // if we don't escape this, then it's breaking the normal css @import
                        if (url.match(cssImportRegex)) {
                            return {file: '\'' + url + '\''};
                        }

                        return {file: url};
                    }
github zerodois / vue-snack / rollup.config.js View on Github external
format: 'umd',
    name: options.umdName
  },
  external: options.external,
  plugins: [
    copy({
      'src/styles/KFOlCnqEu92Fr1MmEU9fBBc4.woff2': 'dist/KFOlCnqEu92Fr1MmEU9fBBc4.woff2',
      'src/styles/KFOmCnqEu92Fr1Mu4mxK.woff2': 'dist/KFOmCnqEu92Fr1Mu4mxK.woff2'
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify( process.env.NODE_ENV )
    }),
    eslint({ include: [ '**/*.js', '**/*.vue' ] }),
    vue({ autoStyles: false, styleToImports: true }),
    resolve({ jsnext: true, main: true, browser: true }),
    sass(sassConfig),
    commonjs ()
  ],
  sourcemap: isDevelopment ? 'inline' : true
}

switch (options.transpiler){
  case 'babel' :
    config.plugins.push(babel())
    break;
  case 'buble' :
    config.plugins.push(buble())
    break;
  case 'none':
  default:
    break
}
github yongjun21 / st-scrolly / rollup.config.js View on Github external
'react',
      'prop-types',
      'classnames'
    ],
    input: path.join(PKG_DIR, pkg, 'src/index.jsx'),
    output: [{
      format: 'esm',
      file: path.join(PKG_DIR, pkg, 'dist/index.js'),
      sourcemap: true
    }, {
      format: 'cjs',
      file: path.join(PKG_DIR, pkg, 'dist/legacy.js'),
      sourcemap: true
    }],
    plugins: [
      sass({ output: path.join(PKG_DIR, pkg, 'dist/bundle.css') }),
      buble({ objectAssign: 'Object.assign' })
    ]
  }
}
github video-react / video-react / rollup.config.js View on Github external
function baseConfig() {
  return {
    input: 'src/video-react.js',
    plugins: [
      sass({
        output: 'dist/video-react.css'
      }),
      nodeResolve(),
      commonjs({
        include: 'node_modules/**'
      }),
      babel({
        babelrc: false,
        presets: [
          [
            '@babel/env',
            {
              loose: true,
              shippedProposals: true,
              modules: false,
              targets: {
github pgbross / vue-material-adapter / rollup.config.js View on Github external
sassConfig.output = dist + '.min.css';
    } else {
      sassConfig.output = dist + '.css';
    }
  } else {
    sassConfig.insert = true;
  }

  const config = {
    input,
    output,
    external: ['vue'],
    plugins: [
      vue({ autoStyles: false, styleToImports: true }),
      resolve({ jsnext: true, main: true, browser: true }),
      sass(sassConfig),
      babel(babelConfig),
      commonjs(),
      replace({
        __VERSION__: pkg.version,
      }),
    ],
    onwarn,
  };

  if (isProduction) {
    config.plugins.push(
      terser({
        output: {
          comments: function(node, comment) {
            var text = comment.value;
            var type = comment.type;
github shipshapecode / tether / rollup.config.js View on Github external
output: [
    {
      file: 'dist/js/tether.min.js',
      format: 'umd',
      name: 'Tether',
      sourcemap: true
    },
    {
      file: 'dist/js/tether.esm.min.js',
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    babel(),
    sass(getSassOptions(true)),
    terser(),
    license({
      banner
    }),
    filesize(),
    visualizer()
  ]
});

export default rollupBuilds;
github hiendv / octicons-modular / rollup.plugins.js View on Github external
withSass (output) {
    return new Plugins([
      sass({
        options: {
          includePaths: [
            path.join(__dirname, 'node_modules')
          ]
        },
        processor: css => postcss(postcssPlugins).process(css, { from: void 0 }).then(result => result.css),
        output
      }),
      ...this.items
    ])
  }

rollup-plugin-sass

Rollup Sass files.

MIT
Latest version published 9 days ago

Package Health Score

80 / 100
Full package analysis

Popular rollup-plugin-sass functions