标签: node-sass

具有多个输入文件的Node-sass

node-sass直接从命令行(一个Makefile,真的)使用来构建我的CSS.

scss文件位于不同的目录中,并且它们不相互引用.我想要的是将这些文件分类为单个CSS输出,我可以从HTML中读取 - 使用工作源映射.

这是我在Makefile中的当前命令:

$(OUT_MAIN_CSS): $(SCSS) Makefile $(node-sass)
    cat $(SCSS) > $(TMP_SCSS)
    $(node-sass) --output-style compressed --source-map $(OUT_MAIN_CSS).map $(TMP_SCSS) $@
    rm $(TMP_SCSS)
Run Code Online (Sandbox Code Playgroud)

OUT_MAIN_CSSout/bundle.css.SCSS是输入文件的列表.node-sassnode_modules/.bin/node-sass.

我想要一个单行,不需要临时文件.另外,我希望我的源映射引用(用于调试)导致原始文件,而不是临时文件.

node-sass语法1

node-sass [options] <input.scss> [output.css]
Run Code Online (Sandbox Code Playgroud)

在这里,node-sass坚持只有一个输入文件.如果我有两个或更多,第二个被视为输出,其内容被覆盖.

"输入目录"和"输出目录"有一些选项,但我不想通过这种相当任意的限制约束我的构建过程(是的,最终我会弯曲......).

node-sass语法2

cat <input.scss> | node-sass [options] > output.css
Run Code Online (Sandbox Code Playgroud)

这更符合Unix的心态.问题是双重的.我的输出文件位于子目录(out/bundle.css)中,这会混淆源映射引用,因为node-sass它不知道输出路径.

似乎有--source-map-root这个,但我没有让它工作......

显然在这里把一个方形螺栓放在一个圆孔里,不是吗?你会怎么做?

最简单的方法就是ring.scss在根中简单地收集一个,将所有不相关的部分收集在一起,然后对此进行分类?

sass npm node-sass

7
推荐指数
1
解决办法
1万
查看次数

更新到Node v4.0.0后运行gulp-sass时出错

我更新到Node v4.0.0,之后当我在我的项目中运行gulp时,我得到一个关于gulp-sass/node-sass的错误,如下所示:

错误:libsass未找到绑定.尝试重新安装node-sass

我试图删除项目中的所有节点模块并重新安装,我收到一些错误:

npm WARN package.json package@0.0.0没有存储库字段.

npm WARN package.json package@0.0.0没有许可证字段.

npm WARN弃用CSSselect@0.4.1:该模块现在可用作'css-select'

npm WARN弃用了CSSwhat@0.4.7:该模块现在可用作'css-what'

npm WARN弃用pangyp@2.3.2:使用node-gyp @ 3 +,它可以完成所有工作

-

node-sass@2.1.1 install/Users/Jonathan/Documents/sites/wkux/ct -html-lib/node_modules/gulp-sass/node_modules/node-sass

节点脚本/ install.js

无法从https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/darwin-x64-node-4.0/binding.node下载文件

node-sass@2.1.1 postinstall/Users/Jonathan/Documents/sites/wkux/ct -html-lib/node_modules/gulp-sass/node_modules/node-sass

node scripts/build.js

gyp:/Users/Jonathan/.node-gyp/4.0.0/common.gypi未找到(cwd:/ Users/Jonathan/Documents/sites/wkux/ct-html-lib/node_modules/gulp-sass/node_modules/node -sass)在尝试加载binding.gyp时读取包含binding.gyp

gyp ERR!配置错误

gyp ERR!堆栈错误:gyp退出代码失败:1

gyp ERR!在ChildProcess.onCpExit堆栈(/Users/Jonathan/Documents/sites/wkux/ct-html-lib/node_modules/gulp-sass/node_modules/node-sass/node_modules/pangyp/lib/configure.js:346:16)

gyp ERR!堆栈在emitTwo(events.js:87:13)

gyp ERR!在ChildProcess.emit堆栈(events.js:172:7)

gyp ERR!Process.ChildProcess._handle.onexit(internal/child_process.js:200:12)中的堆栈

gyp ERR!系统达尔文14.5.0

gyp ERR!命令"/ usr/local/bin/node""/ Users/Jonathan/Documents/sites/wkux/ct-html-lib/node_modules/gulp-sass/node_modules/node-sass/node_modules/pangyp/bin/node-gyp ""重建"

gyp ERR!cwd/Users/Jonathan/Documents/sites/wkux/ct -html-lib/node_modules/gulp-sass/node_modules/node-sass

gyp ERR!node -v v4.0.0

gyp ERR!pangyp -v v2.3.2

gyp ERR!不好

构建失败

所有其他节点模块似乎都安装得很好.它与node-sass的东西在gulp-sass中引起了问题.

node.js gulp node-sass gulp-sass

7
推荐指数
1
解决办法
4433
查看次数

create-react-app(不弹出)+波本威士忌/整洁?

我正在重写一个使用Bourbon的"旧"React原型,它还在gulpfile中使用gulp-sass来注入一个节点整齐的依赖:

var sassOptions = {
    includePaths: require('node-neat').includePaths,
};
Run Code Online (Sandbox Code Playgroud)

我想使用create-react-app样板并通过使用npm脚本编译sass文件来为样式设置一个"简单"的工作流程(也因为create-react-app限制了你)但我无法弄清楚如何去做.

"build-css": "node-sass src/styles/ -o src/",
"watch-css": "npm run build-css && node-sass src/styles/ -o src/ --watch --recursive"
Run Code Online (Sandbox Code Playgroud)

我可能会在将来使用不同的方法重写样式(可能使用样式组件,可能继续使用Sass并完全忽略Bourbon)但我只需要从旧项目中移植Sass样式.

有关集成create-react-app(不弹出)和Bourbon/Neat的任何想法?

有没有办法将neat.includePaths位放入package.json中的node-sass单线程脚本中,例如?

neat bourbon node-sass create-react-app npm-scripts

7
推荐指数
1
解决办法
605
查看次数

如何从 node-sass 获取输出到 postcss autoprefixer

如何使用 node-sass 的输出通过 postcss autoprefixer。

我不打算使用任何 webpack 或 gulp。

我纯粹使用节点包中的 cli

这是我当前的 npm 脚本

node-sass --watch ./src/scss --output ./dist/assets/css | postcss ./dist/assets/css/app.css --use autoprefixer --output ./dist/assets/css/app-dist.css
Run Code Online (Sandbox Code Playgroud)

只有当我以不同的名称输出到同一个文件夹时,一切才有效。但是如果我想输出到相同的名称,它就不起作用。

所以流程是 scss -> css -> autoprefixer ->compiled.css

pipe node-sass autoprefixer postcss

7
推荐指数
1
解决办法
1119
查看次数

npm 试图加载错误版本的 node-sass

我正在将项目升级到 node-sass 4.9.4,因为我们以前的版本 3.13.1 不再受支持,如果尝试从 github 加载将导致 404。问题是每当我尝试这样做时,npm 一直在尝试加载node-sass@3.13.1

我试图做的npm install node-sass@4.9.4npm install node-sass@4.9.3npm install node-sass@latest却试图造成以下错误每次加载3.13.1:

$ npm install node-sass@4.9.3

> node-sass@3.13.1 install D:\Projects\Repos\bluemill\mle-website\node_modules\gulp-sass\node_modules\node-sass
> node scripts/install.js

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

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> node-sass@4.9.3 install D:\Projects\Repos\bluemill\mle-website\node_modules\node-sass
> node …
Run Code Online (Sandbox Code Playgroud)

npm node-sass npm-install

7
推荐指数
1
解决办法
5437
查看次数

该模块的插件或加载程序报告了无效的依赖项

我有一个 Laravel/Inertia.js/Svelte 项目,我在其中导入基于svelte 组件中的Zurb Foundation设置文件的设置 sass 文件:

<style lang="scss">
    @import 'resources/sass/settings';

    ...
</style>
Run Code Online (Sandbox Code Playgroud)

该设置文件依次从 Foundation-sites 模块 (utils) 导入 sass 文件。尽管导入工作正常,但我从 Webpack 收到以下警告:

WARNING in ./resources/js/academy/transactions/orders/Order.svelte
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context 
dependencies, but this is deprecated behavior.
Loaders: …
Run Code Online (Sandbox Code Playgroud)

node-sass webpack laravel-mix svelte

7
推荐指数
0
解决办法
6842
查看次数

错误:Node Sass 尚不支持您当前的环境

当我使用 command 在 Fedora 32 中启动 React 项目时yarn start,它显示如下错误:

\n
./src/style/base.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/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/style/base.scss)\nError: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (93)\nFor more information on which environments are supported please see:\nhttps://github.com/sass/node-sass/releases/tag/v4.14.1\n
Run Code Online (Sandbox Code Playgroud)\n

我当前的节点版本是:

\n
[dolphin@MiWiFi-R4CM-srv]~/Documents/GitHub/react-admin% nvm list\n        v8.17.0\n       v10.24.1\n->     v16.13.0\n        v17.2.0\n         system\ndefault -> 8 (-> v8.17.0)\n
Run Code Online (Sandbox Code Playgroud)\n

我尝试了不同版本的节点但没有解决这个问题,为什么会发生这种情况?我应该怎么做才能解决这个问题?我没有node-sass在 中找到任何包依赖项package.json,这是 package.json 文件:

\n
{\n    "name": "react-admin",\n    "version": "0.1.0",\n    "private": true,\n    "dependencies": {\n        "@ant-design/compatible": "1.0.8",\n        "animate.css": "^3.7.2",\n        "antd": "^4.0.0",\n        "axios": "^0.19.0",\n …
Run Code Online (Sandbox Code Playgroud)

javascript node.js reactjs node-sass

7
推荐指数
2
解决办法
3万
查看次数

Sass 尚不支持您当前的环境:Windows 64 位且运行时不受支持 (93)

这是 VSC 终端向我展示的内容

Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (93)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
Run Code Online (Sandbox Code Playgroud)

我在堆栈溢出中尝试了一些解决方案:

npm rebuild node-sass
Run Code Online (Sandbox Code Playgroud)

npm uninstall node-sass && npm install node-sass
Run Code Online (Sandbox Code Playgroud)

但不起作用,我看到有些人谈论节点版本是否支持 sass,我使用v16.14.0它的 LTS 版本应该支持我猜,我希望有人可以提供帮助,谢谢

npm node-sass

7
推荐指数
1
解决办法
9502
查看次数

NPM INSTALL 在 angular 项目中时出错

我们是一个致力于 angular 项目的团队。从 repo 下载代码后,当我尝试运行 $npm install 时,我面临以下错误。

我尝试在项目目录下安装 node-gyp、node-sass、删除的 node_modules,但在执行 $npm install 时没有解决问题

../src/create_string.cpp: 在函数 'char* create_string(Nan::MaybeLocal)': ../src/create_string.cpp:17:37: 错误:没有匹配的函数调用 v8::String:: Utf8Value::Utf8Value(v8::Local&)' v8::String::Utf8Value string(value); ^

在 /home/pc-username/.node-gyp/12.7.0/include/node/node.h:63:0 包含的文件中,

             from ../../../../../nan/nan.h:54,
             from ../src/create_string.cpp:1:
/home/pc-username/.node-gyp/12.7.0/include/node/v8.h:3002:5: note: candidate: v8::String::Utf8Value::Utf8Value(v8::Isolate*, v8::Local<v8::Value>)
     Utf8Value(Isolate* isolate, Local<v8::Value> obj);
     ^~~~~~~~~
Run Code Online (Sandbox Code Playgroud)

/home/pc-username/.node-gyp/12.7.0/include/node/v8.h:3002:5: 注意:候选人需要 2 个参数,1 个提供 binding.target.mk:127: 目标 'Release 的配方/obj.target/binding/src/create_string.o' 失败

make: *** [Release/obj.target/binding/src/create_string.o] Error 1
make: Leaving directory '/home/pc-username/project-folder/project-name/node_modules/@angular-devkit/build-angular/node_modules/node-sass/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit …
Run Code Online (Sandbox Code Playgroud)

node-gyp node-sass angular

6
推荐指数
1
解决办法
5550
查看次数

错误:Node Sass 尚不支持您当前的环境:Linux 64-bit with Unsupported runtime (72)

错误:Node Sass 尚不支持您当前的环境:Linux 64-bit with Unsupported runtime (72)

我在使用最新版本的 node.js 时遇到了这个问题,即 12.6.0 和 npm 版本 6.9.0。

哪个版本的 node-sass 与上述 node 和 npm 版本兼容。

节点 sass 版本:4.5.3

node.js gulp node-sass npm-install

6
推荐指数
1
解决办法
3344
查看次数