标签: node-sass

因为我在不同的组件中使用相同的代码集。这是我的代码结构。

我想使用Sass 变量和 mixin，这样我就不必在不同的文件中多次重复相同的代码。这是我的变量文件。而且我不知道如何在组件的不同文件中使用这些颜色。

并且有很多按钮使用相同的 css。如何创建一个 mixin 并在不同的地方使用它。

如标题所述，我希望node-sass可以将scss文件监视/编译为css，而无需一遍又一遍地运行命令。

编辑：是否有一个可以运行node-sass而不是ruby sass的艰巨任务？因为我所看到的是grunt-contrib-sass / compass，所以都使用ruby。

我正在使用 node.js 编译一个静态站点。我想编译sass。我要求node-sass并打电话给：a.renderSync({data:"body{h1{color:green}}"}).css。这回来了<SlowBuffer 62 6f 64 79 20 68 31 20 7b 0a 20 20 63 6f 6c 6f 72 3a 20 67 72 65 65 6e 3b 20 7d 0a>。什么是慢缓冲区？我只想要我的 CSS。

谢谢！

\n我需要将SASS和SCSS字符串编译为CSS项目的因此我\xc2\xb4m使用节点包node-sass。转换 SCSS 工作正常，但 SASS 不行。

SASS 的示例代码：

\'use strict\';\n\nvar sass = require(\'node-sass\');\n\nvar dataTemp = \'body{background:blue; a{color:black;}}\';\n\nvar output = sass.renderSync({\n  data: dataTemp\n});\n\nconsole.log(output.css.toString());\n

当我尝试转换这样的东西时，问题就来了，这应该是有效的 .sass 语法

\'use strict\';\n\nvar sass = require(\'node-sass\');\n\nvar dataTemp = \'.red\\n color: red\';\n\nvar output = sass.renderSync({\n  data: dataTemp\n});\n\nconsole.log(output.css.toString());\n

控制台输出：

Error: Invalid CSS after ".": expected 1 selector or at-rule, was ".red color: red "\n

显然，node-sass 无法以这种方式编译 .sass 代码。Node-sass 的语法是：

var result = sass.renderSync({\n  data: scss_content\n …

我已经看到了许多使用观看特定文件夹的示例node-sass，但是我的css并不都在同一个文件夹中。我希望它以您可以使用的方式监视scss文件的所有子目录onchange（例如）。我假设语法将是这样的：

`node-sass -w app/**/*.scss -o app/**/`

...但是会产生错误： Error: ENOENT: no such file or directory, lstat 'app/**/*.scss'

我要做什么甚至有可能node-sass吗？如果没有，是否有更好的方法将我的scss文件批量编译为css？如果可能的话，我正在尝试仅使用npm脚本进行构建。

我webpack用作我的react应用程序的加载程序。node-sass是我正在使用的装载机之一。我的操作系统是Mac OSX High Sierra. 我目前正在使用node v8.9.3. 我无法使用安装它，npm但可以使用yarn. 这是我使用时的结果npm：

Unable to save binary /Users/user/Documents/react/react.js-essential-training/node_modules/node-sass/vendor/darwin-x64-57 : { Error:
EACCES: permission denied, mkdir '/Users/user/Documents/react/react.js-essential-training/node_modules/node-sass/vendor'
at Object.fs.mkdirSync (fs.js:885:18)
at sync (/Users/user/Documents/react/react.js-essential-training/node_modules/mkdirp/index.js:71:13)
at Function.sync (/Users/user/Documents/react/react.js-essential-training/node_modules/mkdirp/index.js:77:24)
at checkAndDownloadBinary (/Users/user/Documents/react/react.js-essential-training/node_modules/node-sass/scripts/install.js:111
:11)
at Object.<anonymous> (/Users/user/Documents/react/react.js-essential-training/node_modules/node-sass/scripts/install.js:154:1)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
errno: -13,
code: 'EACCES',
syscall: 'mkdir',
path: '/Users/user/Documents/react/react.js-essential-training/node_modules/node-sass/vendor' }

> node-sass@4.7.2 postinstall …

我在vue.js有一个项目.我无法安装npm因为我这个错误:

gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/home/devel2   /Documents/vuejs/platzi-music/node_modules/node-sass/build'
gyp ERR! System Linux 4.13.0-36-generic
gyp ERR! command "/usr/local/bin/node" "/home/devel2/Documents/vuejs/platzi-music/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /home/devel2/Documents/vuejs/platzi-music/node_modules/node-sass
gyp ERR! node -v v9.8.0
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 

我尝试过:

 sudo chmod -R 777 node_modules

我将nodejs树脂安装到8.XX

 sudo npm node-sass -F

但任何工作.

任何的想法？谢谢.

我对这个环境还很陌生,我试图在node.js模块和Laravel(5.1.11)整体上加快速度,所以...

我有一个由cPanel Installitron实现的全新Laravel安装.我正在使用PHPStorm通过提供的安装所有节点模块package.json:

的package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^3.0.0",
    "bootstrap-sass": "^3.0.0"
  }
}

我运行安装时遇到的错误是:

Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node": 

HTTP error 404 Not Found

我可以理解为什么会发生这种情况,因为这是旧版本node-sass,但我怎么知道哪些新版本与所请求的版本兼容laravel-elixir？我不想只是安装一个更新的版本,node-sass因为挖一个更深的洞会让我更难找到问题的解决方案.有什么办法解决这个问题？

我是 SCSS 新手，在使用 @use 规则时遇到问题。

sass/helpers/_variables.scss

$companyColor: #d60048;

标头/标头.scss

@use '../sass/helpers/_variables' as variables;

.app-header {
    background-color: variables.$companyColor;
}

我收到错误：

ERROR in ./src/Header/Header.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--8-2!./src/Header/Header.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$companyColor;"
        on line 4 of C:\MyProject\Client\src\Header\Header.scss
>>     background-color: variables.$companyColor;
   -------------------------------^

任何帮助将不胜感激。

当我使用 npm start 启动 React 应用程序时，出现此错误。如何修复此错误？

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5
-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/App.scss)
Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.

这是错误的屏幕截图