nuxt使用scss变量配置

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

weixin_30376083

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

阅读量234

点赞数

文章标签： webpack ViewUI

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

版权

   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)  
 
  }  
 
  })  
 
  },  
 
  }  
 
  }