我正在使用带有 SASS 和 CSS 模块的 React。如何在不传递新 ClassName 或类似内容的情况下设置子组件的样式。对于前。

我想在子组件上定位或做一些样式，而不必给出特定的类，就像你做的时候p span一样，所有的跨度都是子组件，我只想做一些引用所有子组件的样式父组件中的组件。但是随着类的编译，我不知道如何引用那些孩子。

//ParentComponent.js
Import Styles from 'ParentComponent.scss';
Import Child from 'ChildComponent';
Import ChildB from 'ChildComponentB';
...
return(
    <div>
        <ChildB />
        <Child />
        <Child />
    </div>
);


//ParentComponent.scss (?)(?)
.child {...}

例如，这里如何Child仅引用组件而不传递 ClassName，或者不导入 ChildComponent 的 SASS 文件以获取对组件类的引用。

//ChildComponent.js
Import Styles from 'ChildComponent.scss';
...
return(
    <div classNames={Styles.child}></div>
);

//ChildComponent.scss
.child {...}

我正在研究一个遵循这种结构的 React 项目

src |
  components |
    Footer |
      index.jsx
      styles.scss
    Header |
      index.jsx
      styles.scss
    scss |
      helpers.scss
      variables.scss
      ...
    main.scss

在我的变量文件中，我使用了css自定义变量，因此，所有这些变量都在那里:root，我可以在我的组件样式中访问它们。

当我想创建深色时，我想使用 SCSS 函数darken，但它不评估它们并抛出一个错误，说这var(--blue)不是有效颜色。

作为解决方案，我决定将所有变量移动到 SCSS 变量中，但是在构建项目时，它会引发另一个错误，指出 a$blue未定义。

我可以使用的唯一解决方案是将变量文件包含在所有样式文件中，但是，我不知道对于我正在使用的结构是否有更好的解决方案。

我在与我通常使用的计算机不同的计算机上运行我的节点应用程序时遇到问题。经过大量的故障排除：

我收到的错误消息是：

Error: ENOENT: no such file or directory, scandir '.../node_modules/node-sass/vendor'

我正在阅读的帖子建议我运行sudo npm install -g node-sass，这给了我以下错误：

Error: EACCES: permission denied, mkdir '...nvm/versions/node/v8.9.0/lib/node_modules/node-sass/build'

然后我尝试运行，sudo npm rebuild node-sass但收到相同的错误消息：

Error: EACCES: permission denied, mkdir '.../node_modules/node-sass/build'

然后我跑了，sudo npm install -g node-sass --unsafe-perm=true --allow-root但它也没有用：

ENOENT: no such file or directory, scandir '.../node_modules/node-sass/vendor'

我在这里做错了什么？为什么 node-sass 不工作？为什么 sudo 不能正常工作？

我刚刚知道我应该使用@use而不是@importin sass。但据我了解，我应该使用npm sass而不是npm node-sass这样做。这两者有什么区别？为什么@use并且@forward不起作用node-sass

我目前正在运行NPM的node-sass工具,但它运行的libsass版本是3.2.2,我需要运行的版本是3.2.4,因为这修复了我在其中一个框架中的一个关键错误使用.

我找不到有关如何构建和/或更新node-sass或libsass以满足我的要求的信息.我已经在运行最新版本的node-sass,3.1.2.

然而,我的node-sass package.json似乎有一个键:值对,表示libsass是3.2.4,但这显然是不正确的.

升级我的libsass版本的最简单方法是什么？

更新

6月6日

我做了一些额外的搜索,仍然无法使libsass处于3.2.4的版本.我已经尝试升级较旧的node-sass包,并检查我的环境变量是否有覆盖.还没有解决方案.

6月7日

似乎由node-sass提供的Libsass版本是3.2.4,但它没有被拾取,并且默认为Libass binarypath:

path.join(__dirname, '..', 'vendor', sass.binaryName.replace(/_/, '/'));

在我的机器上产生:

H:\myproj\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-x64-14\binding.node

我不知道这是什么意思.看看node-sass\lib\extensions.js第134行:

sass.getBinaryPath = function(throwIfNotExists) {
  var binaryPath;

  if (flags['--sass-binary-path']) {
    binaryPath = flags['--sass-binary-path'];
  } else if (process.env.SASS_BINARY_PATH) {
    binaryPath = process.env.SASS_BINARY_PATH;
  } else if (pkg.nodeSassConfig && pkg.nodeSassConfig.binaryPath) {
    binaryPath = pkg.nodeSassConfig.binaryPath;


  // This is the only statement that executes successfully, my libsass binary path is coming from this location. Why?
  } else {
    binaryPath = path.join(__dirname, '..', 'vendor', …

在gulp-sass中有没有可用的选项来组合sass文件？

例如:

main.scss:

$var: red;

control.scss:

@import 'main';
.a{
  color: $var;
}

组合输出文件应该是单个scss文件,如下所示

$var: red;
.a{
  color: $var;
}

我正在尝试使用npm安装node-sass模块但每次显示有关网络配置中的问题的错误,因为我使用代理和私有注册表这是错误:

This is most likely not a problem with node-gyp or the package itself and is related to network connectivity In most cases you are behind a proxy or have bad network setting 

是否可以离线安装此模块？

我有yaml在 Azure Devops 中运行构建的管道。今天早上任务Npm@1开始失败。可以在本地使用 npm 版本 6.14.5，并且npm Statusnpm install上都是绿灯。

pool:
  name: 'Azure Pipelines'
  vmImage: ubuntu-latest

stages:
  - stage: 
    variables:
      buildConfiguration: "Release"
      buildPlatform: "AnyCPU"
    jobs:
    - job: 
      steps:      
      - task: Npm@1
        displayName: 'npm install'
        inputs:
          workingDir: Azure/MySite/ClientApp

这是日志中开始出现问题的地方：

1156 verbose pkgid node-sass@4.14.1
1157 verbose cwd /home/vsts/work/1/s/Azure/MySite/ClientApp
1158 verbose Linux 5.11.0-1021-azure
1159 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
1160 verbose node v16.13.0
1161 verbose npm  v8.1.0
1162 error code 1
1163 error path /home/vsts/work/1/s/Azure/MySite/ClientApp/node_modules/node-sass
1164 error …

尝试将node-sass-json-importer添加到Angular CLI应用程序中.

我使用1.0.0-beta.17的是CLI 版本,但是还无法使用当前版本来解决1.2这个问题.通过纱线安装后,我不知道应该在应用程序配置中设置它.

有没有人成功地将其整合到他们的应用程 我能找到的唯一答案是使用Webpack的应用程序,而不是Angular CLI.

我只是想遵循一个教程，该教程告诉我安装 node-sass 和 sass-loader。当我这样做时，我收到以下错误：

 ERROR  Failed to compile with 1 errors                                                                       6:21:28 PM
 error  in ./src/components/TodoList.vue

Module build failed: TypeError: this.getResolve is not a function
    at Object.loader (C:\xampp\htdocs\projects\todo-vue\node_modules\sass-loader\dist\index.js:52:26)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3de47834","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/TodoList.vue 4:14-377 13:3-17:5 14:22-385
 @ ./src/components/TodoList.vue
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我的 package.json 文件

{
  "name": "todo-vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Jethro Hazelhurst <j.hazelhurst1994@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }, …