postcss-import grunt 插件不起作用

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 文件名。

css-dev 目录中main.css 文件的内容是：

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

意味着意外地，引导文件的内容未导入到main.css 文件中。

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

Answer 1

我不认为 postcss-import 正在查找您的引导 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 规则的路径，它可以查看根目录（通过 默认 process.cwd())、web_modules、node_modules 或本地模块。 导入模块时，它会查找 index.css 或文件 在 style 或 main 字段中的 package.json 中引用。你也可以 手动提供多个查看路径。

如果您将导入保留为

，则对您的引导 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"
}

但是就像我说的那样，这实际上取决于您如何提取库，如果您只是手动抓取它们并将它们放入嵌套文件夹中，而不是插件看起来的位置，那么您只需添加路径对象中文件的直接路径，如我的原始答案所示