nuxt使用scss变量配置

最新推荐文章于 2024-01-23 18:53:58 发布

转载最新推荐文章于 2024-01-23 18:53:58 发布 · 275 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lcosima/p/9653144.html

文章标签：

#webpack #ViewUI

本文介绍如何在Nuxt.js项目中配置nuxt.config.js文件，包括设置页面标题、视口元信息及描述，以及如何通过Webpack加载SASS资源文件，实现全局样式变量的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、配置nuxt.config.js文件
const webpack = require('webpack'); 
  
module.exports = { 
 head: { 
  title: 'project', 
  meta: [ 
   { charset: 'utf-8' }, 
   { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 
   { hid: 'description', name: 'description', content: 'Nuxt.js project' } 
  ] 
 }, 
 build: { 
  extend(config,ctx){ 
    const sassResourcesLoader = { 
    loader: 'sass-resources-loader', 
    options: { 
     resources: [ 
     'assets/cyc.scss'
     ] 
    } 
    } 
    // 遍历nuxt定义的loader配置，向里面添加新的配置。 
    config.module.rules.forEach((rule) => { 
    if (rule.test.toString() === '/\\.vue$/') { 
     rule.options.loaders.sass.push(sassResourcesLoader) 
     rule.options.loaders.scss.push(sassResourcesLoader) 
    } 
    if (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1) { 
     rule.use.push(sassResourcesLoader) 
    } 
    }) 
  
  }, 
 } 
} 