Here is the layout of my project:
my_project
|-- css
| -- main.css
|-- css-dev
| -- main.css
|-- node_modules
| -- bootstrap
| -- dist
| -- css
| -- bootstrap.css
|-- package.json
`-- Gruntfile.js
The contents of my Gruntfile.js are as follows:
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');
};
My intention is to utilize the postcss-import Grunt plugin to import the bootstrap.css file into the css-dev/main.css, then minify it and place the final result in the css directory under the name main.css.
This is the content of the main.css file located in the css-dev directory:
@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;
}
Although everything seems to be set up correctly, after running the Grunt tasks, the @import does not seem to be working as expected. The resulting file looks 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}
Unexpectedly, the content of the bootstrap file was not imported into the main.css file.
What could be causing this issue and how can I resolve it?