使用 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";

汇总配置文件

.
??? build
?   ??? css
?   ??? index.html
?   ??? js
?       ??? main.min.js
??? package.json
??? rollup.config.js
??? src
    ??? scripts
    ?   ??? main.js
    ??? styles
        ??? main.scss

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” ？

运行后npm install rollup --global --verbose，并npm install --save-dev rollup-plugin-scss --verbose在的package.json这个样子的。

编辑 2021-08-06 by John使用 Rollup 编译 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({
      include: ["/**/*.css", "/**/*.scss", "/**/*.sass"],
      output: "css/style.css",
      failOnError: true,
    }),
  ],
};

> 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

Answer 1

main.scssin的导入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"),
    }),
  ],
};