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. ...
随机推荐
- 解决chrome连接自建https服务器报“您的连接不是私密连接”问题
前一段时间,Chrome 突然显示出了“您的连接不是私密连接”,这下可难受了,大部分的网站打开都有问题. 找了各种方法,各种设置都是不行. 一.暴力.费力的方法直接卸载 Chrome ,删除一切数据以 ...
- 莫烦TensorFlow_06 plot可视化
import tensorflow as tf import numpy as np import matplotlib.pyplot as plt def add_layer(inputs, in_ ...
- Spring data redis的使用
Spring data redis的使用 一.Redis的安装和使用 Redis是用C语言开发的一个高性能键值对数据库,可用于数据缓存,主要用于处理大量数据的高访问负载. 下载地址:https://g ...
- vscode使用插件来添加文件说明和函数说明——42header——psioniq File Header——koroFileHeader
安装号以后,设置快捷键如下: 同时需要根据自己的需要的修改json文件 // 文件头部注释 "fileheader.customMade": { "Description ...
- 水晶报表报错:log4net初始值问题
运行水晶报表的程序一直出错,报错如下: System.TypeInitializationException: “CrystalDecisions.ReportSource.ReportSourceF ...
- 生产者消费者模型-Java代码实现
什么是生产者-消费者模式 比如有两个进程A和B,它们共享一个固定大小的缓冲区,A进程产生数据放入缓冲区,B进程从缓冲区中取出数据进行计算,那么这里其实就是一个生产者和消费者的模式,A相当于生产者,B相 ...
- [学习笔记] 网络最大流的HLPP算法
#define \(u\)的伴点集合 与\(u\)相隔一条边的且\(u\)能达到的点的集合 \(0x00~ {}~Preface\) \(HLPP(Highest~Label~Preflow~Push ...
- 本地手动一步步搭建WNMP环境(nginx+php+mysql) Windows平台
环境:Windows 10 x64 参考文章: WNMP完整教程 windows下PHP环境的搭建 我自定义安装后的目录结构: +WNMP ++MySQL_Server-8.0.13 ++n ...
- java web开发入门十(idea创建maven SSM项目)基于intellig idea
一.搭建项目骨架 二.配置pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xm ...
- 强烈推荐一个和朋友远程桌面的软件teamviewer
强烈推荐一个和朋友远程桌面的软件teamviewer个人认为:贼溜