Question

postcssで@importがうまくいきません。

・実行結果が下記のように読み込んだファイルの部分だけミニファイされず、calcも実行されていません。読み込み自体はできているようです。
.baseのみbase.css


・圧縮後
.base {
color: blue;
line-height: 1.5em+1em;

}
.logo{color:#88e18e;width:48px;width:3rem}.logo .button{size:4rem 5rem}～



・gulp実行前のCSS
@import url('base.css');

:root {
--brand-color: #88E18E;
}

.logo {
color: var(--brand-color);
width: 3rem;
.button {
size: 4rem 5rem;
}
}





・
//gulpfile.js
var gulp = require('gulp'); //gulpをインポート
var postcss = require('gulp-postcss'); //gulp-postcssをインポート
var cssnext = require('postcss-cssnext'); //cssnextをインポート
var nested = require('postcss-nested');
var reporter = require('postcss-reporter'); //stylelintだけだとレポートが出力されない為
var csswring = require('csswring');
var calc = require('postcss-calc');
var postcssimport = require('postcss-import');

gulp.task('css', function () { //”css”タスクを登録
var plugins = [
cssnext, //一旦空の配列を作成
nested,
reporter,
calc,
csswring,
postcssimport
];
return gulp.src('./src-before/*.css') //src-before下にある.cssファイルを指定
.pipe(postcss(plugins)) //PostCSSにファイルを処理してもらう
.pipe(gulp.dest('./dest-after')); //生成されたCSSをdest-after下に配置
});



最後に@importを使うのは初めてなのですが、読み込ます場所は、特に規定がなく
CSS設計上読み込ませたいところに入れればよいと考えてよいでしょうか？

どこかにまとめて記載しないといけないなどのコーディングルールはないですよね。

Answer 1

ご質問の内容の理解が多少難しいのですが以下の点ご注意されてください

・@import url('base.css');　のパスは正しいですか　css/base.css とかではありませんか？
・gulpは　@import する外部CSSにも効きますか？　仕様上読み込むCSSで2次的にimportしても効かないんじゃ無いでしょうか（予測です）？

@importは記載位置によって、どのCSSルールが優先適応されるかは変わると思います。（場所は上部でなくてもかまわないです）

Comments

ありがとうございます。
説明不足だったかもしれませんが、下記のように読み込み自体はできています。
その後gulpでminifyしても、@importの部分だけ圧縮されません。

・圧縮後
.base {
color: blue;
line-height: 1.5em+1em;
}
上記が、@importの部分です。

---

なるほど　すいませんがそこまで詳しくはないのでここら辺にヒントのような物があります　ご参考になりましたら幸いです
https://github.com/sindresorhus/gulp-ruby-sass/issues/78

---

ありがとうございます。
とてもありがたいのですが、英語がわからないので日本語の情報をご存知でしたらありがたいです。