CODEWITHSUNDEEP
javascriptcsssassrollupjs
lowtechsun
lowtechsun

Reputation: 1955

Compile Sass files with Rollup

Given is the following simple project structure.

.
├── build
│   ├── css
│   ├── index.html
│   └── js
│       └── main.min.js
├── package.json
├── rollup.config.js
└── src
    ├── scripts
    │   └── main.js
    └── styles
        └── main.scss

src/scripts/main.js content is import "styles/main.scss";

rollup.config.js

import scss from "rollup-plugin-scss";

export default {
  input: "./src/scripts/main.js",
  output: {
    file: "./build/js/main.min.js",
    format: "esm",
  },
  plugins: [
    scss({
      include: ["/**/*.css", "/**/*.scss", "/**/*.sass"],
      output: "css/style.css",
      failOnError: true,
    }),
  ],
};

Running rollup -c with this config results in this output without creating css/style.css.

> rollup -c
./src/scripts/main.js → ./build/js/main.min.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
styles/main.scss (imported by src/scripts/main.js)
created ./build/js/main.min.js in 7ms

What am I missing? How can I use "sass" instead of "node-sass" in the config per this issue?

After running npm install rollup --global --verbose and npm install --save-dev rollup-plugin-scss --verbose the package.json looks like this.

edit 2021-08-06 by John Compile Sass files with Rollup

npm install --save-dev rollup-plugin-scss@3 sass

{
  "name": "example",
  "version": "1.0.0",
  "main": "build/js/main.min.js",
  "dependencies": {},
  "devDependencies": {
    "rollup": "^2.28.2",
    "rollup-plugin-scss": "^2.6.1"
  },
  "scripts": {
    "build": "rollup -c"
  }
}

Upvotes: 9

Views: 27122

Answers (1)

lowtechsun
lowtechsun

Reputation: 1955

The import of main.scss in src/scripts/main.js was not quite right.

It has to be import "../styles/main.scss"; instead of import "./styles/main.scss";

With the following rollup.config.js the compiled CSS file is saved to ./build/css/style.css.

import scss from "rollup-plugin-scss";

export default {
  input: "./src/scripts/main.js",
  output: {
    file: "./build/js/main.min.js",
    format: "esm",
  },
  plugins: [
    scss({
      output: "./build/css/style.css",
      failOnError: true,
    }),
  ],
};

To use "sass" instead of "node-sass" installing "sass" with npm install --save-dev sass --verbose and adding it to the config like so works.

import scss from "rollup-plugin-scss";

export default {
  input: "./src/scripts/main.js",
  output: {
    file: "./build/js/main.min.js",
    format: "esm",
  },
  plugins: [
    scss({
      output: "./build/css/style.css",
      failOnError: true,
      runtime: require("sass"),
    }),
  ],
};

Upvotes: 8

Related Questions