node.js - 自动前缀在 node-sass-middleware 上不起作用

Question

节点静态网站正在运行，node-sass-middleware但不知何故autoprefixer无法正常运行。这个问题似乎没有使用 css 文件来做前缀工作

应用程序.js

const path = require('path');
const sassMiddleware = require('node-sass-middleware');
const postcssMiddleware = require('postcss-middleware');
const autoprefixer = require('autoprefixer');
const express = require('express');

const styleSrcPath = __dirname + '/scss';
const styleDestPath = __dirname + '/public/css';
const scriptDestPath = __dirname + '/javascript';
const fontSrcPath = __dirname + '/fonts';

const port = process.env.PORT || 3000;
const app = express();

app.use('/css', sassMiddleware({
  src: styleSrcPath,
  dest: styleDestPath,
  debug: true,
  outputStyle: process.env.NODE_ENV === 'development' ? 'extended' : 'compressed',
  force: process.env.NODE_ENV === 'development',
}));

// Load assets
app.use('/css', postcssMiddleware({
  src: (req) => {
    console.log(req.url)
    console.log(req.url)
    console.log(req.url)
    return path.join(styleDestPath, req.url)
  },
  plugins: [
    autoprefixer()
  ],
}));
// app.use('/css', express.static(styleDestPath));
app.use('/fonts', express.static(fontSrcPath));
app.use('/js', express.static(scriptDestPath));
app.use('/img', express.static(path.join(__dirname, 'images')));
app.use('/video', express.static(path.join(__dirname, 'videos')));

// Load view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.get('/', (req, res) => res.render('index', { page: 'Home'}));
app.get('/about-me', (req, res) => res.render('about', { page: 'About Me'}));
app.get('/portfolio', (req, res) => res.render('portfolio', { page: 'Portfolio'}));
app.get('/contact', (req, res) => res.render('contact', { page: 'Contact'}));
app.get('/cv', (req, res) => res.render('cv', { page: 'cv'}));

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

.browserslistrc

# Browsers that we support
last 4 version

autoprefixer 的主要目的是管理 flex 和 grid 属性

标签： node.jsexpresssassnode-sass