使用 npm 安装 node-sass

发布时间：2023-05-25 13:44:04 所属栏目：教程来源：

导读：在 Ruby 环境安装 Sass 我们使用了 gem ，那么在安装 node-sass 的时候我们需要使用 npm ，作为前端你一定是知道 npm 包管理器的，所以我们直接像下面这样使用 npm 安装：

$ npm install node-sass
// 将 node-s

在 Ruby 环境安装 Sass 我们使用了 gem ，那么在安装 node-sass 的时候我们需要使用 npm ，作为前端你一定是知道 npm 包管理器的，所以我们直接像下面这样使用 npm 安装：

$ npm install node-sass
// 将 node-sass 写入项目的 package.json 中
$ npm install node-sass --save-dev

上面我们仅仅是在 Node 环境安装了 Sass，但我们前端的项目是使用 Webpack 来构建，那么我们还需要使用 sass-loader 来编译项目中的 Sass ，所以我们需要在 Webpack 的配置中配置 sass-loader ，配置如下：

// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 Commonjs 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
}]
}
};

上面就是在我们的前端项目中安装 Sass 的方式，后面我们将详细介绍 Sass 的使用，更多关于 Webpack 的配置请查阅 Webpack 文档。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!