微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何更改Nuxt.js配置生成头样式表?

我有问题。我需要编译两个单独的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}`);
});

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。