使用Rollup编译Sass文件

Question

给出的是以下简单的项目结构。

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

src/scripts/main.js内容为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,
    }),
  ],
};

在不创建css/style.css的情况下，使用此配置运行rollup -c将产生此输出。

> 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

我遗漏了什么？如何在配置per this issue中使用"sass“而不是"node-sass”？

在运行npm install rollup --global --verbose和npm install --save-dev rollup-plugin-scss --verbose之后，package.json如下所示。

由John Compile Sass files with Rollup编辑2021-08-06

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"
  }
}

Answer 1

在src/scripts/main.js中导入main.scss是不太正确的。

它必须是import "../styles/main.scss";而不是import "./styles/main.scss";

使用以下rollup.config.js将编译后的CSS文件保存到./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,
    }),
  ],
};

使用"sass“而不是"node-sass”在npm install --save-dev sass --verbose中安装"sass“并将其添加到配置中，如下所示。

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"),
    }),
  ],
};