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 Grunt插件将bootstrap.css文件导入css-dev/main.css文件并缩小结果并将最终文件作为{css目录放在main.css目录中{1}}文件名。

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

我认为所有事情都是正确的，但在运行grunt任务后，似乎@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}

意味着意外，bootstrap文件的内容未导入main.css文件。

什么是问题，我该如何解决？

Answer 1

我不认为postcss-import正在找到你的bootstrap 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
            }
        }
    }
});

修改

这真的取决于你如何拉动你的css库，我想你会问你如何设置它以便自动找到它们。根据插件

此插件可以使用本地文件，节点模块或web_modules。至解析@import规则的路径，它可以查看根目录（通过 default process.cwd（）），web_modules，node_modules或本地模块。导入模块时，它将查找index.css或file 在样式或主要字段中的package.json中引用。你也可以提供手动多路径的路径。

如果您将导入保留为
，则为bootstrap css的含义
@import "bootstrap.css";

它自动查找的唯一地方是

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

如果您将导入更改为

@import "bootstrap";

它将在index.css
的以下文件夹中查找
web_modules/bootstrap/index.css node_modules/bootstrap/index.css local_modules/bootstrap/index.css

如果您使用某种软件包管理器拉出了您的css库，并且它有一个package.json，它位于库的根文件夹中

node_modules/bootstrap/package.json

package.json可以使用main或style属性
告诉postcss在哪里找到库
{ ... "main": "dist/css/bootstrap.css" }

但就像我说的那样，这真的取决于你如何拉动你的图书库，如果你只是手动抓住它们并将它们放在嵌套文件夹中，而不是插件看起来那么，那么你＆＃ 39;只需要在路径对象中添加文件的直接路径，如我原来的答案所示

postcss-import grunt插件不起作用

1 个答案: