9

I'm currently using Rollup and PostCSS. How do I target a specific scss file that I want to be processed rather than having to use @import 'source/scss/main.scss'in mysource/js/entry.js`

For example doing something like...

// rollup.config.js
...
postcss({
        from: 'source/scss/main.scss'
        minimize: true,
        sourceMap: true, 
        extract : 'build/css/main.css'
    }),
...

Rather than in source/js/entry.js

//source/js/entry.js
import  '../scss/main.scss'; // don't want to import SCSS from within JS file

import { someJSmodule } from './someJSmodule.js';
import { anotherJSmodule } from './anotherJSmodule.js';

Here is my current rollup.config.js

// rollup.config.js
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import copy from 'rollup-plugin-copy';
import postcss from 'rollup-plugin-postcss';


export default {
    input: 'source/js/entry.js',
    output: {
        file: 'build/js/bundle.js',
        format: 'iife'
    },
    plugins: [
        copy({
            'source/index.html': 'build/index.html',
            verbose: true
        }),
        resolve({
            preferBuiltins: true
        }),
        postcss({
            minimize: true,
            sourceMap: true, 
            extract : 'build/css/main.css'
        }),
        commonjs(),
        babel({
            exclude: 'node_modules/**'
        })
    ]
};
dwkns
  • 2,369
  • 4
  • 22
  • 35
  • 1
    Turns out you can't. Only files in the rollup dependency graph is watched. And plugins determine which files are added to the dependency graph. – dwkns Nov 08 '18 at 18:45

0 Answers0