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 my
source/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/**'
})
]
};