# 淘寶適配方案
問題:
> px2remLoader, 無法和less共用。
起因:
> 我開始是用了淘寶的適配方案,用了px2rem-loader進行自動轉(zhuǎn)碼,在這個項目當中,還使用了less來進行編寫css,可惜的是less的全局變量無法,引入,每個子組件,都需要重新引入。
>
經(jīng)過奮斗的百度后,總算解決了,全局引入的問題??上В琾x2rem-loader不生效了。經(jīng)過查看。(還好我懂點webpack配置,之后一定要好好看看配置了。。。。)
我的配置如下:
~~~
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
function resolveResource(name) {
return path.resolve(__dirname, '../src/assets/css/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
// 'postcss-loader',
px2remLoader,
'less-loader',
{
loader: 'sass-resources-loader',
options: {
// it need a absolute path
resources: [resolveResource('basic.less')]
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: "../../"
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: "../../"
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateSassResourceLoader(),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
const output = []
const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}
~~~
* vue升級過后,loader都是放在build文件夾下面的utils.js。提供options的是webpack.dev.conf.js和webpack.prod.conf.js
資料鏈接:
[解決第三方ui庫的問題](https://segmentfault.com/q/1010000014793903/a-1020000014804930)
[vue 引入less全局變量的解決方案](https://blog.csdn.net/u014292161/article/details/79193381)
- 前端
- pc端
- 京東無延時菜單效果
- datapicker組件的編寫
- cursor禁止默認樣式
- 移動端
- web在真機調(diào)試
- 有關(guān)vue的上拉加載
- 下拉刷新
- vue獲取dom節(jié)點
- worker技術(shù)
- h5頁面喚醒手機撥號,發(fā)短信功能
- 彈出層喚醒擠壓css背景圖片
- 23模式
- 基礎(chǔ)模式
- SMD同步模塊
- canvas
- 點的均勻分布
- 線條繪畫
- canvas常見的全局屬性
- 判斷點在某個區(qū)間內(nèi)
- 保證動畫效果的流暢性
- arc函數(shù)學習
- cookies
- 本地服務(wù)搭建
- Mint UI框架的學習
- 第一天
- Swiper組件的解析
- loadmore組件
- 二維碼的生成
- 前端優(yōu)化
- 瀏覽器緩存
- indexdb本地數(shù)據(jù)庫的使用
- 淺談前端優(yōu)化
- css漸變屬性
- 前端常用組件學習
- picker組件
- vue
- 模塊下的state訪問
- vue的進階
- npm包的發(fā)布
- 淘寶移動端適配問題
- vue的生命周期的理解
- vue的路由學習
- vue自帶的動畫效果
- vue 項目里,img標簽報錯,添加默認圖片
- axios 實現(xiàn)loading加載提示
- qs庫
- vue的v-for指令無法使用在tr、td中
- vue打包之后,npm run dev 空白
- vue 單頁面百度統(tǒng)計
- unix時間轉(zhuǎn)化
- UI組件的實現(xiàn)
- picker
- upload組件
- js動畫效果
- canvas甜甜圈的編寫
- 瀑布流實現(xiàn)
- 適配問題
- 圖片加載
- js基礎(chǔ)知識
- js數(shù)組合并
- 響應(yīng)布局總結(jié)
- 組件開發(fā)
- grid組件
- 專題頁面常用布局頁面
- scroll滾動問題
- 項目整理經(jīng)驗收集
- 畫圖工具應(yīng)用實現(xiàn)記錄
- 參考線實現(xiàn)
- JCode
- 多條件篩選不用ajax的原因分析
- node
- koa路由下的分塊
- 連接數(shù)據(jù)庫mysql
- 初步搭建數(shù)據(jù)庫模型
- java
- spring框架的學習
- maven 搭建web項目
- 建站
- 關(guān)聯(lián)github
- 雜文
- 后端常用成熟系統(tǒng)
- node實戰(zhàn)練習
- 編寫郵箱通知
- 微信小程序
- 模板之坑
- 模板坑之數(shù)據(jù)傳入
- 小程序組件化之一
- 有關(guān)this的綁定
- 小程序組件化之二
- 小程序分包加載
- tab切換,頁面狀態(tài)不更新
- 小程序請求組件(草稿)
- php學習之路
- 文件上傳
- 有關(guān)數(shù)據(jù)庫時間類型的插入
- Ubuntu下的php開啟擴展模塊
- windows系統(tǒng)下的hosts文件位置
- 騰訊云的cos
- thinkPHP
- 模塊設(shè)計
- 模型的使用
- ajax的請求異??偨Y(jié)
- apache服務(wù)器
- 虛擬主機的建立
- ssh的使用
- ftp服務(wù)器配置
- Lamp的搭建
- ftp從零開始配置
- https的配置
- git hooks實現(xiàn)簡單的自動部署
- ubuntu系統(tǒng)登錄遠程ubuntu服務(wù)器
- ubuntu
- 新建用戶需要使用sudo
- sftp的文件上傳問題
- 配置apache部分問題總結(jié)
- git服務(wù)器的搭建
- githook的學習
- ubuntu 虛擬主機搭建
- ubunut的服務(wù)器的防火墻的關(guān)閉
- 寶塔部署laravel
- 關(guān)于寶塔phpmyadmin無法訪問的問題
- 解決碼云每次提交輸入密碼的問題
- mysql
- phpmyadmin的安裝
- 遠程登陸數(shù)據(jù)庫
- git的使用
- 拉去分支的代碼
- git remote指令
- 學習臨時筆記
- ios兼容性問題
- 蘋果獲取屏幕寬度問題
- toDataURL無法導出圖片
- 蘋果觸屏滾動,下拉刷新問題
- jquery動畫
- jquery的animate無法使用transform
- jquery隊列queue
- css重學之路
- 規(guī)范一
- css3的matrix屬性
- 淘寶適配方案
- Yii框架學習
- gd庫的支持安裝
- larval框架學習
- 中間件
- 指令
- 自定義指令生成token
- 微信登錄后端篇
- 寶塔apache配置ssl
- SVN
- PS
- 快捷鍵
- Redis
- Redis在Unbtun下的配置
- 微信公眾號開發(fā)
- 測試號配置
