使用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内容是导入“style/main.scss”

卷起来。配置。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”？

运行npm install rollup--global--verbose和npm install--save dev rollup plugin scss--verbose包后。json看起来像这样。

编辑2021-08-06 by John使用汇总编译Sass文件

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。scssinsrc/scripts/main。js不太正确。

它必须是import./styles/main.scss” 而不是导入“/styles/main.scss”

使用以下汇总。配置。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--verose安装“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"),
    }),
  ],
};