Question

我有问题。我需要编译两个单独的scss文件，但仅包含一个。哪一个-我必须从快递的会议中得到。

这里是nuxt.config.js的示例。构建完nuxt之后，将所有这2个文件添加到head。

  build: {
    extend(config, { isDev, isClient }) {
      if (isClient) {
        Object.assign(config, {
          entry: {
            day: '~/assets/scss/day/day.scss',
            night: '~/assets/scss/night/night.scss'
          }
        })
      }
      // Sets webpack's mode to development if `isDev` is true.
      if (isDev) {
        config.mode = 'development'
      } else {
        config.mode = 'production'
      }
    },

第二种方法，使用express-handlebars进行自定义布局。但是我不明白如何获取和包括nuxt标记到此布局，因为我需要SSR。代码示例

const hbs = require('express-handlebars');
const path = require('path');
const { loadNuxt, build } = require('nuxt');
const app = require('express')();
const is_ie = (str) => str.includes('MSIE') || str.includes('Trident');
const port = process.env.PORT || 3001;
// We instantiate Nuxt.js with the options
const config = require('./nuxt.config.js');
const nuxt = new Nuxt(config);

// Get a ready to use Nuxt instance
const nuxt = await loadNuxt(isDev ? 'dev' : 'start');

// Enable live build & reloading on dev
if (isDev) {
  build(nuxt);
}
// view engine setup
app.engine(
  'hbs',
  hbs({
    extname: 'hbs',
    defaultLayout: 'layout',
    layoutsDir: path.join(__dirname, '/views/'),
  })
);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(nuxt.render(req, res));
app.get('*', (req, res) => {
  console.log(res, req)
  const theme = req.cookies && req.cookies.theme ? req.cookies.theme : 'night';
  const theme_file = `${theme}.css`;

  res.render('app.hbs', {
    theme: theme_file,
    is_ie: is_ie(req.headers['user-agent']),
    title: process.env.META_TITLE,
    description: process.env.META_DESCRIPTION,
  });
});
app.listen(port, 'localhost', () => {
  console.log(`Server is listening on port: ${port}`);
});

如何更改Nuxt.js配置生成头样式表？

0 个答案: