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. ...
随机推荐
- ipc.Client: Retrying connect to server: .../10.0.0.27:10020. Already tried 6 time(s); retry policy is RetryUpToMaximumCountWithFixedSleep(maxRetries=10, sleepTime=1 SECONDS)
运行 时候爆出这个错 Exception in thread "main" java.io.IOException: java.net.ConnectException: Call ...
- SQL Server 创建数据库
创建数据库有两种方式: 方式1-图形化界面创建: 1. 鼠标右击“数据库”,然后点击新建数据库 2.设置常规选项卡 2.1 给数据库命名,一般多个单词要用下划线连接,不建议用空格,如Test_DB. ...
- Bootstrap-table 增删改查
1.引入bootstarp-table 系类的js/css文件 @*1.Jquery组件引用*@ <script src="~/Scripts/jquery-1.10.2.js&quo ...
- Bootstrap-table实现动态合并相同行
Bootstrap-table 表格合并相同名字的列 @编写function() /** * 合并行 * @param data 原始数据(在服务端完成排序) * @param fieldName ...
- 打造个人专属网盘nextcloud
原文 https://edu.aliyun.com/course/150/lesson/list?spm=5176.9278281.815111.sence.114d4f3eLLMS53
- shell脚本注意点
1.等号两边不能有空格,例如: 获取七天前的日期: before_7_day=`date -d "7 days ago" +%Y-%m-%d` 2.自定义函数只能返回数值,不能返回 ...
- python 进程数据通信
进程通信的第一种方式from multiprocessing import Process,Queue def f(q): q.put([42,2,'hello']) print('zi q id:' ...
- ng 打包给路径添加前缀
1.ng build --base --href /前缀名/--common - chunk --output-hashing=all --optimization 2.更改ts和html中的路径,将 ...
- layui.dropdown.js
前 在 layui 框架下做了一个小组件,是下拉框功能,当然也可以很好的变成其他组件,前提你会修改. 还需要更多的完善.后期(我也不清楚会是啥时候会优化)
- SQL ----------- 借助视图写多表查询
在多表查询中可能遇到两表.三表乃致四表查询,自己进行直接用sql 语句进行书写的话可能比较难,但是可以借助视图进行分析,书写 1.右击视图点击新建 选择需要的表点击添加,注意两个表之间要有相同的字段 ...