javascript - 使用 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,
    }),
  ],
};

运行 rollup -c使用此配置会导致此输出而不创建 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

我错过了什么？如何在配置中使用“sass”而不是“node-sass” per this issue ?
运行后 npm install rollup --global --verbose和 npm install --save-dev rollup-plugin-scss --verbose package.json 看起来像这样。
由约翰编辑 2021-08-06 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"
  }
}

Answer 1

进口main.scss在 src/scripts/main.js不太对。
必须是 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”安装“sass”和 npm install --save-dev sass --verbose并像这样将其添加到配置中。

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