标签: node-sass

我正在开发一个离子应用程序,我使用sass.当我将我的节点版本升级到4.0.0时,有一个关于node-sass的错误抛出.错误是打击:

ionic $ /Applications/My-Project/nearbook/nearbooks_ionic/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22
    throw new Error('`libsass` bindings not found. Try reinstalling `node-sass
          ^
Error: `libsass` bindings not found. Try reinstalling `node-sass`?
    at getBinding (/Applications/My-Project/nearbook/nearbooks_ionic/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:22:11)
    at Object.<anonymous> (/Applications/My-Project/nearbook/nearbooks_ionic/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:188:23)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Applications/My-Project/nearbook/nearbooks_ionic/node_modules/gulp-sass/index.js:3:17)
    at Module._compile (module.js:460:26)

我试图重新安装我的所有node_modules(我删除node_modules文件夹并重新运行节点安装)或运行node rebuild node-sass但它仍然无法正常工作.

当我将我的节点版本降级到0.12.7并重新安装所有node_modules时,我的问题解决了.

所以我猜节点4.0编译node-sass时出现了问题.

有人知道怎么修这个东西吗？

从以下脚本部分获取package.json:

"scripts":{
    "sass:watch": "npm run sass -- -w ./src/public/stylesheets -r --source-map true",
    "livereload": "live-reload --port 9091 ./src/**/*",
    "dev:watch" : "npm run sass:watch; npm run livereload"
}

如何在不阻止对方的情况下成功运行任务sass:watch和任务？livereloaddev:watch

目前,当我运行块时.npm run dev:watch sass:watchlivereload

如果我重新排序它们,会出现同样的问题.

我试图yarn在离线模式下使用,因为我使用的构建服务器无法访问yarn注册表或github.com.

我发现这篇关于如何yarn在离线模式下使用的文章,在我添加node-sass之前一直很好用.

它即使你使用yarn install --offline,node-sass也会去github.com下载libsass.

有没有办法指示node-sass使用离线版libsass而不是去github.com？

我尝试将 sass 编译为 css 并从中导入 css 文件，node_modules/purecss/build/pure.css因此我的 sass 文件如下所示：

@import '~purecss/build/pure.css';

我的 package.json 是

{
  "name": "build_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build:sass": "node-sass --include-path=node_modules Private/Stylesheets/main.scss Public/Style/main.css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.9",
    "purecss": "^1.0.0"
  }
}

我已经尝试过--include-path=node_modules，并--include-path node_modules和--include-paths node_modules，但它不是不工作？

有人有想法吗？

我有一个angular 4应用程序，我想在ubuntu上运行它。我将所有项目文件，package.json和package-lock.json复制到winscp中的文件夹，但没有复制node_modules！现在，当我运行npm install时，出现如下错误：

> node-sass@4.7.2 install /home/ubuntu/cms/node_modules/@angular/cli/node_modules/node-sass
> node scripts/install.js

Unable to save binary /home/ubuntu/cms/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-57 : { Error: EACCES: permission denied, mkdir '/home/ubuntu/cms/node_modules/@angular/cli/node_modules/node-sass/vendor'
    at Object.fs.mkdirSync (fs.js:885:18)
    at sync (/home/ubuntu/cms/node_modules/mkdirp/index.js:71:13)
    at Function.sync (/home/ubuntu/cms/node_modules/mkdirp/index.js:77:24)
    at checkAndDownloadBinary (/home/ubuntu/cms/node_modules/@angular/cli/node_modules/node-sass/scripts/install.js:111:11)
    at Object.<anonymous> (/home/ubuntu/cms/node_modules/@angular/cli/node_modules/node-sass/scripts/install.js:154:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
  errno: -13,
  code: 'EACCES',
  syscall: 'mkdir',
  path: '/home/ubuntu/cms/node_modules/@angular/cli/node_modules/node-sass/vendor' }

> node-sass@4.9.1 install /home/ubuntu/cms/node_modules/node-sass
> node scripts/install.js

Unable to save binary /home/ubuntu/cms/node_modules/node-sass/vendor/linux-x64-57 : { Error: EACCES: permission denied, …

我使用 create-react-app 创建 react app 并设置如下文件结构：

src/
 -index.js
 -main.scss
 pages/
  -somepage.js
  -somepage.scss
 styles/
  -_variables.scss

索引.js

import './main.scss';
...

主文件

@import './styles/variables.scss';

_variables.scss

 $primary: #000;

somepage.js

import somepage.scss

somepage.scss

selector {
 property: $primary; <-- sass can't find that
}

请问有什么想法吗？谢谢你。

我正在尝试转译/编译 [ https://sass-lang.com/documentation/at-rules/use#load-paths]提供的以下示例

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

这是 node-sass 给我的错误：

{
  "status": 1,
  "file": "C:/Users/path/scss_mixins/style.scss",
  "line": 4,
  "column": 12,
  "message": "Invalid CSS after \"  @include corners\": expected \"}\", was \".rounded;\"",
  "formatted": "Error: Invalid CSS after \"  @include corners\": expected \"}\", was \".rounded;\"\n        on line 4 of style.scss\n>>   @include corners.rounded;\r\n   -----------^\n"
}

这是我的 cli 输入：

npx node-sass -o ./dist style.scss

node、npm …

当我尝试使用yarn安装node-sass作为sass-loader反应应用程序的依赖项时，出现以下错误：

yarn add v1.22.0
[1/4] Resolving packages...
warning node-sass > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning node-sass > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
error Couldn't find package "error-ex" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

我已经有了最新版本的纱线和 npm。几天前，同样的命令似乎有效。但现在不工作。现在我必须切换到dart-sass而不是node-sass. 我通常在安装依赖项时不指定版本。这个错误与此有关吗？

这是我的依赖项，以防万一：

"dependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "normalize.css": "^8.0.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2", …

我使用了 create-react-app 并安装了 node-sass 作为依赖。react版本是V16.13.1.，node-sass版本是V4.14.1。两者都应该是最新版本。

我的问题是，如果我在 scss 文件中使用 @debug $some-variable，它不会出现在我的终端中。然而，有趣的是当我杀死终端并再次重新启动它时，它会弹出几分之一秒然后再次消失。@warn 规则也是如此。

解决方法是改用@error，@error 规则总是拦截终端并且 100% 弹出错误，我用它作为一种解决方法来调试我的 scss 代码。

但我相信问题出在 node-sass 端，@debug/@warn 应该打印出一些东西，但只是在 react 脚本端被覆盖了，即被“react-scripts start”脚本覆盖。在我看来，应该有一种方法可以阻止 react 端执行此操作，并将 stdout 信息保留在终端上。也许在 node-sass 中添加一个标志或修改反应端的启动脚本？

我希望我能正确解决问题。有没有人有这个问题的经验？请指教。

示例代码：

在 foo.scss 文件中：

   @debug "hello world"  // it does not print anything in terminal
   @warn "this is a warning" // it does not print anything in terminal either
   @error "it definately catch this"  // the error shows up in terminal only

我将需要一段时间才能找到使用具有 scss 值的 javascript 变量的解决方案。

让我解释一下我的问题。我使用 VueJs/Vuetify，我的主题有两个入口点。

第一个是这样的 json 文件：

module.exports = {
  primary: { base: '#4d7cff', dark: '#2756d8', light: '#96b0fb' },
  secondary: { base: '#00bda5', dark: '#209284', light: '#cef1ec' },
  content: { base: '#37467a', dark: '#242c47', light: '#c3cbe6' },
  danger: { base: '#e43858', dark: '#d22545', light: '#E36d83' },
  success: { base: '#00c28d', dark: '#199c79', light: '#0bebae' },
  accent: '#f5f8fa',
  gradient: 'linear-gradient(45deg, #00bda5, #4d7cff)'
}

这个文件是 vuetify 需要和使用的两个创建自定义颜色值并且完美运行。

第二个是一个简单的 scss 文件：

// Theme colors
$color-primary-base: #4d7cff;
$color-primary-dark: #2756d8;
$color-primary-light: #96b0fb; …