Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

`Undefined variable` inside function

オープン
#90 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
30/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
css, javascript
領域
frontend, tooling

調査の方向性

Reproduce the report using postcss.config.js and the shown main.pcss, colors.pcss, components/flash.pcss, and components/forms.pcss files. Start by checking how imported files are processed and how postcss-simple-vars scopes variables; done means determining whether the reported undefined variable is reproducible and documenting or fixing the behavior.

索引モデルが issue の本文から書いたものです。

説明

Hello.

I have such files:

// postcss.config.js
module.exports = {
	plugins: [
		require('postcss-import')({
			root: `${__dirname}/assets/styles`
		}),
		require('postcss-simple-vars'),
		require('postcss-conditionals'),
		require('postcss-nested'),
		require('postcss-flexbugs-fixes'),
		// require('postcss-color-mod-function'),
		require('autoprefixer')
	]
}
/* main.pcss */
@import 'colors.pcss';

@import 'components/flash.pcss';
@import 'components/forms.pcss';

/* ... */
/* colors.pcss */
$danger-text-color: red;
$error-color: $danger-text-color;
/* components/flash.pcss */
.flash {
	&.error {
		color: $error-color;
	}
}
/* components/forms.pcss */
form {
	p.error {
		color: color-mod($error-color whiteness(15%));
	}
}

And I'm getting such error:

CssSyntaxError: postcss-simple-vars: /home/alex/Projects/ruby/test/foo_bar/assets/styles/components/forms.pcss:22:3: Undefined variable $error-color

  20 | 		margin: 0;
  21 | 		padding-left: 0.4em;
> 22 | 		color: color-mod($error-color whiteness(15%));
     | 		^
  23 | 	}
  24 | 
主要言語
JavaScript
スター
429
フォーク
36
平均マージ
4時間 52分
マージ済み PR(30日)
2

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートなし
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

postcss/postcss-simple-vars のほかの issue

postcss/postcss-simple-vars の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。