postcssインポートイサキプラグインは私のプロジェクトの

Question

構造はこのようなものです動作しません：

my_project 
|-- css 
| -- main.css 
|-- css-dev 
| -- main.css 
|-- node_modules 
| -- bootstrap 
|  -- dist 
|   -- css 
|    -- bootstrap.css 
|-- package.json 
`-- Gruntfile.js 

そして、私のGruntfile.jsこのようなものです：あなたが見たよう

module.exports = function (grunt) { 
    var processorArray = [ 
     require('postcss-import')(), 
     require('cssnano')() 
    ]; 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
     postcss: { 
      options: { 
       processors: processorArray 
      }, 
      dist: { 
       files: [{ 
        expand: true, 
        cwd: 'css-dev/', 
        src: ['**/*.css'], 
        dest: 'css/' 
       }] 
      } 
     }, 
     watch: { 
      scripts: { 
       files: ['css-dev/*.css'], 
       tasks: ['postcss'], 
       options: { 
        spawn: false 
       } 
      } 
     } 
    }); 

    grunt.loadNpmTasks('grunt-postcss'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 

}; 

、私はpostcss-importうなり声を使用したいですプラグインを使用してbootstrap.cssファイルをcss-dev/main.cssファイルにインポートし、最終結果ファイルをcssディレクトリにmain.cssというファイル名で配置します。

コンテンツmain.cssファイルcss-dev内のディレクトリのは、次のとおりです。

@import "bootstrap.css"; 

/* normalize selectors */ 
h1::before, h1:before { 
    /* reduce shorthand even further */ 
    margin: 10px 20px 10px 20px; 
    /* reduce color values */ 
    color: #ff0000; 
    /* drop outdated vendor prefixes */ 
    -webkit-border-radius: 16px; 
    border-radius: 16px; 
    /* remove duplicated properties */ 
    font-weight: normal; 
    font-weight: normal; 
    /* reduce position values */ 
    background-position: bottom right; 
} 

/* correct invalid placement */ 
@charset "utf-8"; 

.test{ 
    font: 12px Calibri; 
} 

私はすべての物事が正しいことだと思いますが、単調なタスクを実行した後、@importが正常に動作しないようで、結果ファイルは、このようなものです：

@import "bootstrap.css";h1:before{margin:10px 20px;color:red;border-radius:16px;font-weight:400;background-position:100% 100%}.test{font:2px Calibri} 

意味ブートストラップファイルの内容が予期せずmain.cssファイルにインポートされません。

何が問題なのですが、どうすれば解決できますか？

Answer 1

私はpostcssインポートがあなたのブートストラップCSSファイルを見つけているとは思わないが、あなたはpathプロパティを使ってそれを探す場所を正確に指定できる。

var processorArray = [ 
    require('postcss-import')({ 
     path: 'node_modules/bootstrap/dist/css' 
    }), 
    require('cssnano')() 
]; 
grunt.initConfig({ 
    pkg: grunt.file.readJSON('package.json'), 
    postcss: { 
     options: { 
      processors: processorArray 
     }, 
     dist: { 
      files: [{ 
       expand: true, 
       cwd: 'css-dev/', 
       src: ['**/*.css'], 
       dest: 'css/' 
      }] 
     } 
    }, 
    watch: { 
     scripts: { 
      files: ['css-dev/*.css'], 
      tasks: ['postcss'], 
      options: { 
       spawn: false 
      } 
     } 
    } 
}); 

EDIT

それは本当にあなたがあなたのCSSライブラリを引っ張っているか、私はあなたがそれらを自動的に発見されたので、あなたがそれを設定する方法を尋ねると思います依存しています。プラグインによると

このプラグインは、ローカルファイル、ノードモジュール、またはweb_moduleを使用できます。 @importルールのパスを解決するには、ルートディレクトリ（ デフォルトのprocess.cwd（））、web_modules、node_modules、またはローカルモジュールを調べることができます。 モジュールをインポートすると、スタイルフィールドまたはメインフィールドのpackage.jsonで参照されるindex.cssまたはファイル が検索されます。また、手動で複数のパスを表示する場所を で指定することもできます。あなたは

@import "bootstrap"; 

にインポートを変更した場合、自動的に

web_modules/bootstrap.css 
node_modules/bootstrap.css 
local_modules/bootstrap.css 

をしているあなたは

@import "bootstrap.css"; 

ように見える唯一の場所をインポートを残す場合

、あなたのブートストラップCSSの意味

以下の倍数で表示されますindex.css

web_modules/bootstrap/index.css 
node_modules/bootstrap/index.css 
local_modules/bootstrap/index.css 

ためERSあなたはパッケージマネージャのいくつかの種類を使用して、あなたのCSSライブラリを引っ張ってきたし、それがパッケージを持っている場合。JSONはpackage.jsonはどこ

{ 
    ... 
    "main": "dist/css/bootstrap.css" 
} 

メインまたはスタイルプロパティのいずれかを使用してライブラリを検索する場所を伝えるpostcssできるライブラリのルートフォルダに

node_modules/bootstrap/package.json 

が座っていたが、私はそれが実際にどのように依存して言ったようにあなたはあなたがライブラリであるとみなしているのですが、手動で取り込んで入れ子になったフォルダにプラグインがある場所よりも上に置くだけであれば、パスオブジェクトのファイルに直接パスを追加する必要があります私の元の回答で