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}

表示意外地，bootstrap 文件的内容没有导入到 main.css 文件。

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

Answer 1

我认为 postcss-import 没有找到您的 bootstrap css 文件，您可以使用路径属性.

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 库，我想您问的是如何设置它以便自动找到它们。根据插件

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.

对于您的 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 可以告诉 postcss 使用 main 或样式属性

在哪里可以找到库

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

但是就像我说的，这真的取决于你如何拉动你的库，如果你只是手动抓取它们并将它们放在比插件看起来更远的嵌套文件夹中，那么你只需要如我的原始答案所示，将直接路径添加到路径对象中的文件

postcss-import grunt 插件不工作

postcss-import grunt plugin does not work

javascript

css

twitter-bootstrap

gruntjs