问题描述:

Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀

分析原因:

autoprefixer 在项目编译的时候,会根据 loader 的规则编译相应的 CSS。Vue-Cli 创建的项目,默认只处理了 .vue 文件中的 CSS,对于直接 import 引入的样式,需要另外配置 loader 规则。

解决方案:

在 vue.config.js 中添加 CSS 规则:

module.exports = {
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
importLoaders: ,
},
less: {
// 这里的选项会传递给 postcss-loader
importLoaders: ,
}
}
}
};

importLoaders 代表的是针对 import 引入的文件,在 css-loader 前需要进行什么处理,1 代表使用 postcss 进行处理

Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer的更多相关文章

  1. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  2. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  3. Vue Cli 3:创建项目

    一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...

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

    根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install  iview  --save ...

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

    根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install  iview  --save 2 ) 在 webpack ...

  6. 在使用vue+webpack模版创建的项目中使用font-awesome

    前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...

  7. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  8. Vue style里面使用@import引入外部css, 作用域是全局的解决方案

    问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...

  9. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

随机推荐

  1. 201871010104-陈园园 《面向对象程序设计(java)》第十四周学习总结

    201871010104-陈园园 <面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  2. 【Java】Spring

    AnnotationConfigApplicationContext:从一个或多个基于Jav a的配置类中加载Spring应用上下文.AnnotationConfigWebApplicationCon ...

  3. redhat 网卡绑定

    一.bonding技术 bonding(绑定)是一种linux系统下的网卡绑定技术,可以把服务器上n个物理网卡在系统内部抽象(绑定)成一个逻辑上的网卡,能够提升网络吞吐量.实现网络冗余.负载等功能,有 ...

  4. Docker容器数据卷(七)

    Docker致力于: 将运用与运行的环境打包形成容器运行 ,运行可以伴随着容器,但是我们对数据的要求希望是持久化的 容器之间希望有可能共享数据 Docker容器产生的数据,如果不通过docker co ...

  5. LG2053/BZOJ1070 「SCOI2007」修车 费用流

    问题描述 LG2053 BZOJ1070 题解 将\(m\)个修理工拆为\(n \times m\)个,将修理工和车辆看做二分图,连出一个完全二分图. 边流量为\(1\),费用为时间,费用流即可. \ ...

  6. spring框架的定时任务cronExpression表达式详解

    附:cronExpression表达式解释: 0 0 12 * * ?---------------在每天中午12:00触发 0 15 10 ? * *---------------每天上午10:15 ...

  7. Python进阶-Ⅸ 递归 二分法

    1.算法 英文名:algorithm,就是计算的方法.# 是截止到目前,人类发现的针对特定场景的,最优的计算方法.是人类智慧的结晶.# 人脑是复杂的,电脑其实很简单.比如: 999 * 123 人类会 ...

  8. [BZOJ1864][CODEVS2462]三色二叉树

    题目描述 Description 一棵二叉树可以按照如下规则表示成一个由0.1.2组成的字符序列,我们称之为“二叉树序列S”: |-0  表示该树没有子节点 S = |-1S1 表示该树有一个子节点, ...

  9. Codeforces Round #507 (Div. 2, based on Olympiad of Metropolises) D mt19937

    https://codeforces.com/contest/1040/problem/D 用法 mt19937 g(种子); //种子:time(0) mt19937_64 g(); //long ...

  10. [LeetCode] 786. K-th Smallest Prime Fraction 第K小的质分数

    A sorted list A contains 1, plus some number of primes.  Then, for every p < q in the list, we co ...