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

QJan84

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

我只使用NPM,没有Gulp或Grunt!这应该保持不变。

我当前的构建脚本:

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

很好,但是需要很长时间才能编译!

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

我在哪里使用以下内容(来自docs)?

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 /目录。

希望对您有所帮助!

瓦西里斯·西里莫科斯(Vasilis Tsirimokos)

也许这涵盖了您的问题:如何使用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

上面的代码创建了一个监视任务,因此您不必在每次更改时都重新运行node-sass

最后你跑

npm run dev

完毕!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Node.sass和Node.js将scss编译为CSS

来自分类Dev

如何使用Webpack 4将sass编译为CSS?

来自分类Dev

如何使用IntelliJ Idea 13 Ultimate文件观察器将scss文件编译为css?

来自分类Dev

如何使用现有的源映射将scss编译为css?

来自分类Dev

如何使用grunt-sass将多个scss文件编译成多个css文件?

来自分类Dev

在django中使用scss:默认情况下,将CACHE中的CSS编译为“已应用”但默认为“覆盖”

来自分类Dev

Gulpfile:如何将每个SCSS编译为具有相同名称但具有其他常见样式的单独CSS

来自分类Dev

我可以使用什么工具在Linux系统上将Sass编译为CSS?

来自分类Dev

使用Live Sass编译将CSS连接到CSS

来自分类Dev

如何将clojurescript编译为nodejs?

来自分类Dev

angular.cli - Webpack 将 scss 编译为 css

来自分类Dev

Gulp-sass不会将scss文件编译为css,而是将所有文件从scss文件夹复制到css文件夹

来自分类Dev

Gulp-sass不会将scss文件编译为css,而是将所有文件从scss文件夹复制到css文件夹

来自分类Dev

使用gulp-sass在已编译的CSS中从SCSS文件输出行号

来自分类Dev

使用vimscript(vimrc)自动编译Sass \ Scss

来自分类Dev

如何使用Cython将Python 3编译为C

来自分类Dev

如何使用CMake将C ++编译为CUDA

来自分类Dev

如何使用 Android NDK 将 Numpy 编译为 .so?

来自分类Dev

如何使用grunt-sass编译多个scss文件

来自分类Dev

将编译器编译为外部项目并使用吗?

来自分类Dev

将编译器编译为外部项目并使用吗?

来自分类Dev

Gulp-sass无法编译为CSS

来自分类Dev

将gulp sass编译为服务任务

来自分类Dev

如何使用GHC编译器将* .hs编译为llvm ir(* .ll)?

来自分类Dev

步骤,将Node.js源代码编译为字节代码并使用它

来自分类Dev

如何将pandoc管道表编译为html?

来自分类Dev

如何将Python 3应用编译为.exe?

来自分类Dev

如何将Angular模板编译为文本

来自分类Dev

如何将Jenkins工作区编译为.jar

Related 相关文章

  1. 1

    使用Node.sass和Node.js将scss编译为CSS

  2. 2

    如何使用Webpack 4将sass编译为CSS?

  3. 3

    如何使用IntelliJ Idea 13 Ultimate文件观察器将scss文件编译为css?

  4. 4

    如何使用现有的源映射将scss编译为css?

  5. 5

    如何使用grunt-sass将多个scss文件编译成多个css文件?

  6. 6

    在django中使用scss:默认情况下,将CACHE中的CSS编译为“已应用”但默认为“覆盖”

  7. 7

    Gulpfile:如何将每个SCSS编译为具有相同名称但具有其他常见样式的单独CSS

  8. 8

    我可以使用什么工具在Linux系统上将Sass编译为CSS?

  9. 9

    使用Live Sass编译将CSS连接到CSS

  10. 10

    如何将clojurescript编译为nodejs?

  11. 11

    angular.cli - Webpack 将 scss 编译为 css

  12. 12

    Gulp-sass不会将scss文件编译为css,而是将所有文件从scss文件夹复制到css文件夹

  13. 13

    Gulp-sass不会将scss文件编译为css,而是将所有文件从scss文件夹复制到css文件夹

  14. 14

    使用gulp-sass在已编译的CSS中从SCSS文件输出行号

  15. 15

    使用vimscript(vimrc)自动编译Sass \ Scss

  16. 16

    如何使用Cython将Python 3编译为C

  17. 17

    如何使用CMake将C ++编译为CUDA

  18. 18

    如何使用 Android NDK 将 Numpy 编译为 .so?

  19. 19

    如何使用grunt-sass编译多个scss文件

  20. 20

    将编译器编译为外部项目并使用吗?

  21. 21

    将编译器编译为外部项目并使用吗?

  22. 22

    Gulp-sass无法编译为CSS

  23. 23

    将gulp sass编译为服务任务

  24. 24

    如何使用GHC编译器将* .hs编译为llvm ir(* .ll)?

  25. 25

    步骤,将Node.js源代码编译为字节代码并使用它

  26. 26

    如何将pandoc管道表编译为html?

  27. 27

    如何将Python 3应用编译为.exe?

  28. 28

    如何将Angular模板编译为文本

  29. 29

    如何将Jenkins工作区编译为.jar

热门标签

归档