要使用SCSS和Express(Node.js),您需要遵循以下步骤:
npm init
按照提示填写项目信息,最终将生成一个package.json
文件。
npm install express --save
node-sass
:npm install node-sass --save
app.js
的文件,并添加以下代码:const express = require('express');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
styles
的文件夹,并在其中创建一个名为main.scss
的文件。在该文件中添加一些SCSS代码。compile-scss.js
的文件,并添加以下代码:const sass = require('node-sass');
const fs = require('fs');
sass.render({
file: './styles/main.scss',
outFile: './public/css/main.css',
outputStyle: 'compressed',
}, (err, result) => {
if (err) {
console.error(err);
} else {
fs.writeFile('./public/css/main.css', result.css, (err) => {
if (err) {
console.error(err);
} else {
console.log('SCSS compiled to CSS');
}
});
}
});
node compile-scss.js
这将编译main.scss
文件并将其输出到public/css/main.css
。
package.json
:打开package.json
文件,并在scripts
对象中添加以下内容:"scripts": {
"compile-scss": "node compile-scss.js"
}
现在,您可以通过运行以下命令来编译SCSS文件:
npm run compile-scss
public
文件夹中创建一个名为index.html
的文件,并添加以下代码:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCSS with Express</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
node app.js
然后,在浏览器中访问http://localhost:3000
,您应该能看到应用程序并使用SCSS样式。
至此,您已成功在Express(Node.js)项目中使用SCSS。
领取专属 10元无门槛券
手把手带您无忧上云