postcss-import grunt插件不起作用

Question

Structure of my project is like this:

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

And my Gruntfile.js is like this :

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

};

As you see , I want to use postcss-import Grunt plugin to import bootstrap.css file into css-dev/main.css file and minifying result and place final file in css directory as a main.css file name.

Content of main.css file in css-dev directory is :

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

I think that all things are correct, but after running grunt tasks ,seems @import does not work properly and result file is like this :

@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 Unexpectedly, content of bootstrap file not imported to main.css file.

what is problem,how can I solve that?

Answer 1

I don't think postcss-import is finding your bootstrap css file, you can specify exactly where to look for it using the path property.

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

It really depends how you're pulling your css libraries, i think your asking how would you set it up so they are found automatically. According to the plugin

This plugin can consume local files, node modules or web_modules. To resolve path of an @import rule, it can look into root directory (by default process.cwd()), web_modules, node_modules or local modules. When importing a module, it will looks for index.css or file referenced in package.json in the style or main fields. You can also provide manually multiples paths where to look at.

Meaning for your bootstrap css, if you leave the import as

@import "bootstrap.css";

The only place it looks automatically are

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

If you change your import to

@import "bootstrap";

It will look in the following folders for index.css

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

If you've pulled your css library using some kind of package manager and it has a package.json sat in the root folder of the library

node_modules/bootstrap/package.json

The package.json can tell postcss where to find the library using either the main or style property

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

But like i said it really depends how you're pulling you're libraries, if you're just manually grabbing them and putting them in nested folders further than where the plugin looks, then you'll just have to add the direct paths to the file in the path object as shown in my original answer