Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述:
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的更多相关文章
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- Vue Cli 3:创建项目
一 简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,有几个独立的部分. 1 CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.(vue ...
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- Vue style里面使用@import引入外部css, 作用域是全局的解决方案
问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { na ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
随机推荐
- flask 上下文
上文:找到被创建成字典形式的东西 下文: 找到request并执行
- 怎么解决禅道启动服务mysqlzt时的端口失败
打开Windows任务管理器 查看服务是否有MySQL正在运行,停止服务 启动mysqlzt服务 重新启动禅道
- LG2463/BZOJ4698 「SDOI2008」Sandy的卡片 后缀数组
问题描述 LG2463 BZOJ4698 题解 看到\(n\)个数串,一开始不太好处理,可以很容易想到把这\(n\)个数串连到一起,形成一个大串,但是每个串之间不容易处理. 经过思考,想到在每个串中间 ...
- null与“ ”的区别
null是空对象,""是空字符串 null可以赋值给任何对象 ""只能赋值给字符串对象 String s=null; string.trim()就会抛出为空的e ...
- mongo db 去除 _class 字段
import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.NoSuc ...
- MySQL实战45讲学习笔记:第一讲
一.MySQL逻架构图 二.连接器工作原理刨析 1.连接器工作原理图 2.原理图说明 1.连接命令 mysql -h$ip -P$port -u$user -p 2.查询链接状态 3.长连接端连接 1 ...
- [LeetCode] 674. Longest Continuous Increasing Subsequence 最长连续递增序列
Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...
- [LeetCode] 344. Reverse String 翻转字符串
Write a function that reverses a string. The input string is given as an array of characters char[]. ...
- apache2 不支持php文件 解决办法
一.修改apache配置文件 vim /usr/local/apache2/conf/httpd.conf 1.在此加上index.php <IfModule dir_module> Di ...
- asp.net mvc移除X-AspNet-Version、X-AspNetMvc-Version、Server
asp.net mvc程序部署到IIS,,返回的HTTP头中包含Server, X-Powered-By, 和 X-AspNet-Version.X-AspNet-Version信息. 这些信息有时给 ...