Closed johannes-z closed 2 years ago
I think rollup-plugin-sass wants you to use Js to do all your imports. I.e. you don't do imports in your scss and you don't have a main scss file. Instead you have a main JS file for just styles, i.e. "style.js" and you do it like this:
import variables from 'variables';
import layout from 'layout';
etc
Now if you want to do imports in your SCSS files you can override rollup-plugin-sass's runtime with the standard node-sass runtime.
Just install node-sass
npm install --save-dev node-sass
And then import it in your config and set the runtime options (and can also set include paths here);
import nodeSass from 'node-sass';
.........
sass({
output: false,
insert: true,
runtime: nodeSass,
options: {
failOnError: true,
includePaths: [
'src/ko.millerColumns/scss'
]
}
})
I'm actually using gulp 4 with es6 via gulpfile.babel.js and gulp-better-rollup, so my app build file looks like this:
import path from 'path';
import del from 'del';
import { paths } from './config';
import { src, dest, parallel, series } from 'gulp';
import sourcemaps from 'gulp-sourcemaps';
import tildeImporter from 'node-sass-tilde-importer';
import csso from 'gulp-csso';
import uglify from 'gulp-uglify';
import concat from 'gulp-concat';
import rename from 'gulp-rename';
import css2js from 'gulp-css-to-js';
import rollup from 'gulp-better-rollup';
import babel from 'rollup-plugin-babel';
import html from 'rollup-plugin-html';
import sass from 'rollup-plugin-sass';
import nodeSass from 'node-sass';
import includePaths from 'rollup-plugin-includepaths';
import nodeResolve from 'rollup-plugin-node-resolve';
function build(done) {
function cleanApp(cleanDone) {
del.sync(path.join(paths.dst, '**', '*.*'), '!' + path.join(paths.dst));
cleanDone();
}
function appIndexHtml(htmlDone) {
return src(path.join(paths.srcApp, 'index.html'))
.pipe(dest(paths.dst));
}
function appScripts(scriptsDone) {
return src([
path.join(paths.srcApp, 'app.js')
])
.pipe(sourcemaps.init())
.pipe(rollup({
plugins: [
nodeResolve(),
html(
{
include: [
'src/app/html/**/*.html'
]
}
),
sass({
output: false,
insert: true,
failOnError: true
}),
babel()
]
},
{
format: 'iife'
}))
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.dst));
}
function koMillerColumns(scriptsDone) {
return src([
'src/ko.millerColumns/ko.millerColumns.js'
])
.pipe(sourcemaps.init())
.pipe(rollup({
plugins: [
nodeResolve(),
includePaths({
include: {},
paths: ['src/ko.millerColumns/scss'],
external: [],
extensions: ['.scss']
}),
sass({
output: false,
insert: true,
runtime: nodeSass,
options: {
failOnError: true,
includePaths: [
'src/ko.millerColumns/scss'
]
}
}),
babel(),
html(
{
include: [
'src/ko.millerColumns/html/**/*.html'
]
}
)
]
},
{
format: 'iife'
}))
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.dst));
}
function programCourseApi(scriptsDone) {
return src([
path.join(paths.src, 'programCourseApi', 'programCourseApi.js')
])
.pipe(sourcemaps.init())
.pipe(rollup({
plugins: [
babel()
]
},
{
format: 'iife'
}))
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.dst));
}
return series(cleanApp, parallel(series(parallel(koMillerColumns, programCourseApi), appScripts, appIndexHtml)))(done);
}
exports.build = build;
And my main gulpfile.babel.js file looks like this:
"use strict";
import path from 'path';
import { paths } from './build/config';
import { series, parallel, watch } from 'gulp';
import vendor from './build/vendor';
import app from './build/app';
import browserSync from 'browser-sync';
function build(buildDone) {
return parallel(vendor.build, app.build)(buildDone);
}
function buildVendor(buildDone) {
return vendor.build(buildDone);
}
function buildApp(buildDone) {
return app.build(buildDone);
}
function watchSrc() {
var sync = browserSync.create();
sync.init({
server: {
baseDir: paths.dst
}
});
function reload(reloadDone) {
sync.reload();
reloadDone();
}
var vendorPath = 'src/vendor/vendor.scss';
var vendorWatcher = watch([
vendorPath
], vendor.build);
var appPath = 'src/app/**/*.*';
var pluginPath = 'src/ko.millerColumns/**/*.*';
var apiPath = 'src/programCourseApi/**/*.*';
var appWatch = watch([
appPath, pluginPath, apiPath
], series(app.build, reload));
}
exports.build = build;
exports.buildApp = buildApp;
exports.buildVendor = buildVendor;
exports.watch = watchSrc;
Marking as "closed" due to inactivity.
For posterity:
Sass imports currently work as expected (verified as of rollup-plugin-sass 1.2.2):
some-sass-file.scss:
@import "some/sass/module/here"
rollup.config.js
// ..
rollupSass({
outputStyle: 'compressed',
processor: css => postcss([
cssnano
])
.process(css)
.then(result => result.css)
})
// ...
I'm trying to compile *.vue files with scss style tags, but I can't get scss/sass compilation to work.
Part of my rollup config:
The error message I get: