[英]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";
src/scripts/main.js
内容为import "styles/main.scss";
rollup.config.js汇总.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
会导致此 output 而不会创建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 ?我如何在这个问题的配置中使用“sass”而不是“node-sass”?
After running npm install rollup --global --verbose
and npm install --save-dev rollup-plugin-scss --verbose
the package.json looks like this.在运行npm install rollup --global --verbose
和npm install --save-dev rollup-plugin-scss --verbose
之后,package.json 看起来像这样。
edit 2021-08-06 by John Compile Sass files with Rollup John 编辑 2021-08-06 使用 Rollup 编译 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"
}
}
The import of main.scss
in src/scripts/main.js
was not quite right. src/scripts/main.js
中main.scss
的导入不太正确。
It has to be import "../styles/main.scss";
它必须是import "../styles/main.scss";
instead of import "./styles/main.scss";
而不是import "./styles/main.scss";
With the following rollup.config.js
the compiled CSS file is saved to ./build/css/style.css
.使用以下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,
}),
],
};
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.要使用“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"),
}),
],
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.