Error:r Unexpected character '@' for import statements

[johannes-z]

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:

        resolve(),
        css(),
        vue({ css: false }),
        sass({
          processor: css => postcss([autoprefixer])
            .process(css)
            .then(result => result.css),
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
          },
        }),

The error message I get:

[!] Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
..\..\..\node_modules\vuetify\src\styles\main.sass (3:0)
1: // Modeled after ITCSS https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
2:
3: @import './tools/_index'
   ^
4: @import './settings/_index'
5: @import './generic/_index'
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
    at error (...\node_modules\rollup\dist\rollup.js:5330:30)
    at Module.error (...\node_modules\rollup\dist\rollup.js:9605:9)
    at tryParse (...\node_modules\rollup\dist\rollup.js:9516:16)
    at Module.setSource (...\node_modules\rollup\dist\rollup.js:9834:33)
    at Promise.resolve.catch.then.then.then (...\node_modules\rollup\dist\rollup.js:12614:20)

[ryios]

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;

[elycruz]

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)
    })
// ...