如何使用node-sass将scss编译为css

Question

如何使用node-sass将scss编译为css

7

我有一个master.scss文件，其中包含许多其他.scss文件的导入。如果我更改一个*.scss文件，则会自动生成master.css。

我仅使用NPM，没有使用Gulp或Grunt！这应该保持不变。

我的当前构建脚本：

"scripts": {
  "watch-sass": "sass --watch src/scss/master.scss:dist/css/master.css"
}

这很好，但编译需要很长时间！

现在我正在尝试使用node-sass。它应该编译得非常快。不幸的是，我并不完全理解它... 通过npm install node-sass已安装node-sass

我应该在哪里使用以下内容（来自文档）？

var sass = require('node-sass');
sass.render({
  file: scss_filename,
  [, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
  data: scss_content
  [, options..]
});

在 package.json 中并非如此，对吧？

这是一篇教程，我读过的: 使用 NPM 作为任务运行器

这个脚本很好。我该怎么使用它呢？

"scripts": {
  "sass": "node-sass sass/ -o build/css/"
}

这将编译所有不以下划线开头的Sass文件到build/css/目录中。

希望能帮到您！

- QJan84

3个回答

5

node-sass中的watch模式不会执行第一次编译。它假定你已经运行了node-sass。个人而言，我会使用以下代码：

{
  "scripts": {
    "sass": "node-sass -o /path/to/dist /path/to/src",
    "sass:watch": "npm run sass && npm run sass -- --watch --recursive"
  }
}

你可以像这样使用它：npm run sass:watch

- la3roug

那我将这个“npm run sass:watch”添加到我的“start”脚本中，这样就可以使用npm start自动完成这个过程了？ - SpaceNinja

1

@SpaceNinja 是的 - la3roug

5

文档。

如果您想要自动编译文件，则需要加上标志 -w。

node-sass -w -r assets/src/scss/ -o assets/dist/css/

我的package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "build:js": "watchify assets/src/js/main_1.js -o 'exorcist assets/dist/js/main_1.js.map > assets/dist/js/main_1.js' -d -t [babelify --presets [latest]]",
    "build:scss": "node-sass -w -r assets/src/scss/ -o assets/dist/css/",
    "build": "npm run build:scss & npm run build:js"
  },
  "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.1",
    "exorcist": "^0.4.0",
    "node-sass": "^4.5.0",
    "watchify": "^3.7.0"
  },
  "browserify": {
    "transform": [
      "babelify"
    ]
  }
}

package.json 的实际版本: https://gist.github.com/artamonovdev/5f24aaca504e4d1b299bba0413f0a57d

这是 package.json 的实际版本链接。

- artamonovdev

1

你的回答是目前为止最不“笨重”的方法，可以为需要 BS4 和品牌覆盖的项目设置和运行自定义 SCSS。我进行的所有其他研究都导致了前端开发敌对的复杂配置。 - Roralee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vasilis Tsirimokos · Accepted Answer

也许这能解决你的问题：如何使用node-sass（无需Ruby）编译或转换sass / scss到css？如果可以的话，我建议使用grunt，它会使事情变得更简单和更快。这个grunt插件可能是最好的选择：https://www.npmjs.com/package/grunt-contrib-sass //更新

我按照您发送的教程进行操作，非常简单。在根文件夹中创建一个名为“package.json”的文件，其中包含以下内容：

{
  "watches": {
    "sass": "sass/**"
  },
  "scripts": {
    "sass": "node-sass sass/ -o build/css/",
    "dev": "rerun-script"
  }
}

您需要在根目录中打开命令行并运行以下命令：

npm install --save-dev node-sass

上面安装了node-sass。然后，您需要运行以下命令：

npm install --save-dev rerun-script

上述代码创建了一个watch任务，这样你就不必每次更改都重新运行node-sass。

最后运行。

npm run dev

完成!