vue-cli项目中引入全局scss

加载一个全局设置文件

在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求。比如为所有组件全局使用 scss 变量。为了达成此目的:

npm install sass-resources-loader --save-dev

然后增加下面的 webpack 规则:

{
  loader: ‘sass-resources-loader‘,
  options: {
    resources: path.resolve(__dirname, ‘../src/style/_variables.scss‘)
  }
}

举个例子,如果你使用了 vuejs-templates/webpack,请如下修改 build/utils.js

scss: generateLoaders(‘sass‘).concat(
  {
    loader: ‘sass-resources-loader‘,
    options: {
      resources: path.resolve(__dirname, ‘../src/style/_variables.scss‘)
    }
  }
),

在这个文件里,为了避免在最终编译后的文件中出现重复的 CSS,建议只包含变量、mixins 等。

来源:vue-loader官方文档

   https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

原文地址:https://www.cnblogs.com/lanshengzhong/p/8487608.html

时间: 2024-10-12 01:22:56

vue-cli项目中引入全局scss的相关文章

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, acti

vue项目中引入Sass

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

【vue】如何在 Vue-cli 创建的项目中引入 iView

根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save 2)在 webpack 入口页面 main.js   (E:\managerSys\manager-sys\src\main.js)中 添加 如下配置: import iView from 'iview'; // 导入组件库import 'iview/dist/styles/iview.css';

【vue】如何在 Vue-cli 创建的项目中引入iView

根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack 入口页面 main.js (E:\managerSys\manager-sys\src\main.js)中配置 import iView from 'iview'; // 导入组件库import 'iview/dist/styles/iview.css'; // 导入样式 Vue.use(iView

在Android项目中引入MuPdf

由于公司手机App要加入一个附件查看功能,需要查看PDF文件,在网上找了许多第三方工具,最后选择了MuPDF. 更多第三方工具可以查看大神总结的:http://www.cnblogs.com/pokeGame/archive/2011/06/02/2068575.html MuPDF介绍: Android 设备上轻量级.高品质的 PDF/XPS/CBZ 查看器. MuPDF 上的呈现器专为高质量的抗失真图像量身打造,它以像素级的精度高品质呈现文字和文字间的间距,从而获得最高级别的显示保真度,在设

在C++项目中引入Lua(AlphaGo使用的方案)

最近大火的AlphaGo,其中的deepmind已经开源,可以到github中下载https://github.com/deepmind/lab·,网上还有一个基于Python开源AlphaGo,那个不是google的.通过看deepmind源码,我们可以知AlphaGo使用的是C++和Lua方案.当然语言不是AlphaGo的重点,但还是说明了c++和Lua方案能够完成大型的项目.      从2009年开始在三维仿真项目中引入Lua,C++项目的开发效率得到了大幅度.在我们三维仿真这种对性能要

在Java Web项目中引入Mondrian多维分析框架

一,Mondrian简介 Mondrian是一个开源项目,一个用Java写成的OLAP引擎.它用MDX语言实现查询,从关系数据库(RDBMS)中读取数据.然后经过Java API以多维的方式对结果进行展示. Mondrian的使用方式同JDBC驱动类似.可以非常方便的与现有的Web项目集成. Mondrian OLAP 系统由四个层组成,可分为从最终用户到数据中心, 顺序为: 1表现层(the presentation layer) 2维度层(the dimensional layer) 3集合

项目中引入composer

众所周知,composer可以自定义加载插件库和依赖,它也是用PHP写的,怎样在自己的项目中引入并使用composer呢?. 1.新建一个项目,在项目的根目录创建composer.json文件,用过一个大型框架的同学可以发现,框架的根目录总是有一个此文件,对,发现了吗?记住了吗? 2.在composer.json文件里把下面的json格式复制进去 { "require": { } } 3.在项目根目录下创建vendor目录 4.此时执行命令composer update 注意:如果你直

在 Vue 项目中引入 tinymce 富文本编辑器

项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.