Lido Fernandez
Lido Fernandez

Reputation: 456

I cannot add Autoprefixer to a Express project

I cannot add the Autoprefixers to the postcssmidelware, as indicates in the documentation https://github.com/sass/node-sass-middleware

I've been trying also with the express-autoprefixers but I still don't see the vendors in my dest or public folder: here is also a link to my repo (nodeauth/app.js) [email protected]:Lidofernandez/Projects-based-on-node.git

Here is the code:

var sassMiddleware = require('node-sass-middleware');
var postcssMiddleware = require('postcss-middleware');
var autoprefixer = require('autoprefixer');

var app = express();

// styles engine setup
app.set('port', process.env.PORT || 3000);
app.use(
  sassMiddleware({
    src: path.join(__dirname, '/stylesheets/sass'),
    dest: path.join(__dirname, '/public/stylesheets'),
    debug: true,
    outputStyle: 'compressed',
    prefix: '/stylesheets'
  })
);
app.use(
  postcssMiddleware({
    plugins: [autoprefixer({browsers: ['> 1%', 'IE 7'], cascade: false})],
    options: {
      map: {
        inline: false
      }
    },
    src: function(req) {
      return path.join(__dirname, '/public/stylesheets', req.url);
    }
  })
);

Upvotes: 1

Views: 716

Answers (1)

Lido Fernandez
Lido Fernandez

Reputation: 456

and at the end I could figure it out:

So the problem was the I had to specify the folder where the styles are placed :)

app.use(
  '/stylesheets', postcssMiddleware({
    src: function(req) {
      return path.join(__dirname, 'public', 'stylesheets', req.path);
    },
    plugins: [
      autoprefixer()
    ],
    options: {
      map: {
        inline: false
      }
    }
  }
));

Upvotes: 1

Related Questions