webpack项目中自动引入全局scss变量文件

  假设我们有一个公共的scss变量文件variables.scss

/*存放所有全局变量*/
$card-title:#C7D200; //首页 卡片标题颜色
$bc-color:#182037;
$hoverColor: #7abef9; //链接hover颜色
$fontColor: #E6EFFF; //字体颜色-白色

  webpack要识别scss,需要先安装sass的loader

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

  在页面中需要用到这些自定义变量的时候,每次都需要显示引入:

  @import '@/assets/scss/variables.scss';

  这样操作起来非常麻烦,我们可以通过sass-resources-loader来自动引入。

  sass-resources-loader可以访问sass资源任何一个需要访问的sass模块。所以,可以使用共享变量和混合所有SASS样式,而不去每个文件都引用。安装:

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

  然后在 build 文件夹下找到 util.js 修改sass编译器loader的配置,直接把下面的代码复制进去即可:

 // 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
return path.resolve(__dirname, '../src/assets/scss/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../src/assets/scss/variables.scss'
resources: [resolveResource('variables.scss')] //variables
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
});
} else {
return ['vue-style-loader'].concat(loaders);
}
}
    return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
// vue-cli默认sass配置
// sass: generateLoaders('sass', { indentedSyntax: true }),
// scss: generateLoaders('sass'),
// 新引入的sass-resources-loader
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
};

......

vue-cli3 一直运行 /sockjs-node/info?t= 解决方案

D:\WorkSpace\ui-admin\node_modules\sockjs-client\dist\sockjs.js,找到代码1601行,注释掉代码self.xhr.send(payload);

  try {
//self.xhr.send(payload);
} catch (e) {

这样就可以了

解决vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}

在引入vue-router的界面中添加如下代码:

const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};

完!

vue项目中常见问题及解决方案的更多相关文章

  1. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  2. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  3. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  4. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  5. Vue项目部署问题及解决方案

    Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.examp ...

  6. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  7. Vue项目中使用vw实现移动端适配

    我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

  8. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  9. vue项目中微信jssdk在ios签名失败

    一.问题描述 1. vue项目中微信jssdk签名时,在安卓和ios是有差异的,签名时使用的url=window.location.href.split('#')[0],此时在安卓没问题,在ios会导 ...

随机推荐

  1. python第二次作业-titanic数据库练习

    一.读入titanic.xlsx文件,按照教材示例步骤,完成数据清洗. titanic数据集包含11个特征,分别是: Survived:0代表死亡,1代表存活Pclass:乘客所持票类,有三种值(1, ...

  2. SQL Server 约束的增删改

    1. 非空约束 列的为空性决定表中的行是否可以包含空值.空置(NULL)不同于零(0)/空白或者长度为零的字符串(“”). (1)创建非空约束 create table orders ( docent ...

  3. 【洛谷4585】[FJOI2015] 火星商店问题(线段树分治)

    点此看题面 大致题意: 有\(n\)家店,每个商品有一个标价.每天,都可能有某家商店进货,也可能有某人去购物.一个人在购物时,会于编号在区间\([L_i,R_i]\)的商店里挑选一件进货\(d_i\) ...

  4. 如何使用numpy实现一个全连接神经网络?(上)

    全连接神经网络的概念我就不介绍了,对这个不是很了解的朋友,可以移步其他博主的关于神经网络的文章,这里只介绍我使用基本工具实现全连接神经网络的方法. 所用工具: numpy == 1.16.4 matp ...

  5. Unity Package包内插件解锁

    起因: 新版的Unity将模块工具与游戏中的资源文件分开放置,但有一个问题,里边的插件都是只读的,无法添加内容,连创建都是灰色的orz: 要想给这些插件添加一些别的自定义功能,那基本等于做梦,而且插件 ...

  6. clientHeight—scrollHeight—offsetHeight三者的区别

    clientHeight,scrollHeight,offsetHeight 这三个dom属性有时让人觉得相似但又不相似 以前对它们的理解也有一些模糊,现在总结一下,方便以后复习 clientHeig ...

  7. visdom 简单使用

     官方网址: https://github.com/facebookresearch/visdom 入门教程: http://www.ainoobtech.com/pytorch/pytorch-v ...

  8. hive on spark 常用配置

    常用设置 reset; set hive.execution.engine=spark; set hive.map.aggr = false; set hive.auto.convert.join = ...

  9. Visual Studio 2019 16.1 使用 .NET Core 3.0

    一.前言 早在很久之前微软便公布 .NET Core 3.0 将支持开发Winform应用程序等等新特性,现如今 .NET Core 3.0 预览版已经出来第五个预览版了,从 .NET Core 2. ...

  10. sequelize时间自动格式化

    问题 每次查询datetime的字段,显示出来都是这种格式 2019-08-27T12:02:05.000Z 解决办法 初始化Sequelize的时候传入dialectOptions参数 let se ...