postcss-Import Grunzen-Plugin nicht

Question

Struktur meines Projekts ist wie folgt funktioniert:

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

Und mein Gruntfile.js ist wie folgt:

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'); 

}; 

Wie Sie sehen, ich postcss-import Grunt verwenden möchten Plugin zum bootstrap.css Datei in css-dev/main.css Datei zu importieren und Ergebnis zu minimieren und endgültige Datei in css Verzeichnis als main.css Dateiname.

Inhalt von main.css Datei in css-dev Verzeichnis ist:

@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; 
} 

Ich denke, dass alles korrekt sind, aber nach Grunzen Aufgaben ausgeführt wird, scheint @import nicht richtig und Ergebnisdatei ist wie folgt funktioniert:

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

Means Unerwarteter Inhalt der Bootstrap-Datei nicht in main.css Datei importiert.

Was ist das Problem, wie kann ich das lösen?

Answer 1

Ich glaube nicht, dass postcss-import Ihre Bootstrap-CSS-Datei findet, Sie können genau angeben, wo Sie mit der Pfadeigenschaft suchen.

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

Es hängt wirklich davon, wie Sie Ihre CSS-Bibliotheken sind ziehen, ich glaube, Ihre Frage, wie würden Sie es so einrichten, werden sie automatisch gefunden. Nach dem Plugin

Dieses Plugin kann lokale Dateien, Knotenmodule oder web_modules konsumieren. Um Pfad einer @ import Regel auflösen, kann es in Stammverzeichnis (von default process.cwd()), web_module, node_modules oder lokale Module. Beim Importieren eines Moduls wird nach index.css oder Datei gesucht, auf die in package.json in den Stil- oder Hauptfeldern verwiesen wird. Sie können auch manuell mehrere Pfade angeben, wo Sie suchen können.

Bedeutung für die Bootstrap-CSS, wenn Sie den Import als

@import "bootstrap.css"; 

Den einzigen Ort automatisch

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

sind schaut verlassen Wenn Sie Ihren Import

ändern

@import "bootstrap"; 

Es wird in der folgenden Falte aussehen ers für index.css

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

Wenn Sie Ihre CSS-Bibliothek mit einer Art von Paket-Manager gezogen habe und es ein Paket hat.json setzte sich im Stammordner der Bibliothek

node_modules/bootstrap/package.json 

Die package.json kann sagen postcss wo die Bibliothek finden entweder mit der Haupt- oder Stil-

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

Aber wie ich schon sagte, es hängt wirklich davon ab, wie Sie ziehen Ihre Bibliotheken, wenn Sie sie nur manuell greifen und sie in verschachtelte Ordner weiter als wo das Plugin aussieht, dann müssen Sie nur die direkten Pfade zu der Datei im Pfadobjekt hinzufügen, wie gezeigt in meiner ursprünglichen Antwort