omi-cli新版釋出-升級webpack2和支援sass生成元件區域性CSS
寫在前面
omi-cli是Omi的命令列工具。在v0.1.X以及之前版本中,生成出來的專案腳手架
是基於webpack1的。由於:
- webpack1不支援tree-shaking,webpack2 支援tree-shaking
- webpack1不支援 sass-loader,webpack2 支援sass-loader
tree-shaking 作用是移除沒有使用的程式碼有效的減小包體積
sass-loader 可以讓你把sass轉成css,在omi專案裡可以把sass轉成元件的區域性CSS
所以,果斷把omi-cli的專案模板升級為基於webpack2。感興趣的同學可以立馬嘗試下。
$ npm install omi-cli -g //安裝cli $ omi init your_project_name //初始化專案 $ cd your_project_name //轉到專案目錄 $ npm run dev //開發 $ npm run dist //部署釋出
採坑之路
在升級的過程中遇到了不少問題,這裡記錄一下。
問題1
webpack2中,CommonsChunkPlugin不再支援上面的傳參形式,必須傳JSON形式。
問題2
webpack2中,不在允許省略-loader的形式標記loader,如:
{test: /\.html$/, loader: "string"},
都要改成:
{test: /\.html$/, loader: "string-loader"},
問題3
使用webpack-stream的同學可能會碰到上面這個錯誤。找了好久發現:
在gulp裡要修改下第二個引數,把 null 改成 require('webpack')。
sass生成元件區域性CSS
在傳統的webpack專案腳手架中,都會包含css相關的三個loader:
// webpack.config.js module.exports = { ... module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }] } };
- sass-loader負責把sass編譯成css
- css-loader負責把編出來的css轉成CommonJS模組用於js裡面進行require獲取
- style-loader負責把css插入到頁面的head裡面
那麼問題來了?Omi內部本身元件可以定義style方法,如:
class Hello extends Omi.Component {
...
style () {
return `
h1{
cursor:pointer;
}
`;
}
...
}
在Omi內部的管線裡面,會把執行style方法,把返回的css轉成區域性css,然後插入到頁面的head裡面。所以和webpack三個loader裡的管線有衝突!怎麼解決?去掉一個loader便可!
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Sass to CSS
}]
}]
}
};
我們只需要能夠在js裡動態獲取到編譯好的css字串,然後拼在style方法裡便可!兩個管線就打通了!具體程式碼:
import Omi from 'omi';
const style = require('./index.scss');
class Header extends Omi.Component {
...
style () {
return style.toString();
}
...
}
export default Header;
這裡需要注意require到的style不是字串物件,需要執行toString才能獲取到css字串。
相關
- 如果想使用Omi框架或者開發完善Omi框架,可以訪問 Omi使用文件
- 如果你想獲得更佳的閱讀體驗,可以訪問 Docs Website
- 如果你懶得搭建專案腳手架,可以試試 omi-cli
- 如果你有Omi相關的問題可以 New issue
- 如果想更加方便的交流關於Omi的一切可以加入QQ的Omi交流群(256426170)
相關推薦
omi-cli新版釋出-升級webpack2和支援sass生成元件區域性CSS
寫在前面 omi-cli是Omi的命令列工具。在v0.1.X以及之前版本中,生成出來的專案腳手架 是基於webpack1的。由於: webpack1不支援tree-shaking,webpack2 支援tree-shaking webpack1不支援 sass-loader,webpack2 支援sass-
超簡單教程之centos升級Python和Pip為最新版
只有兩步,就可以完成centos升級Python和Pip為最新版 第1步:確認最新的Python版本號 https://www.python.org/downloads/source/ //當前最新是3.7.1,所以下文命令列直接用,如果版本更高如3.8.0,就改下文命令列中的3.7
Spark 2.3新版釋出,開始支援原生 Kubernetes_Kubernetes中文社群
開源社群越來越多人使用Kubernetes來進行資料處理、資料分析和處理機器學習計算,Kubernetes也增加了不少擴充功能,資源定製化、控制器定製化,以便對更深度整合這類專屬應用程式。 現在熱門的大資料分析平臺Spark在2.3新版中,開始原生支援Kubernetes。可以直接在一個現成K
騰訊AlloyTeam正式釋出omi-cli腳手架
omi-cli 使用者指南 檔案目錄 執行完omi init my-app,你可以看到會生成如下的基礎目錄結構 my-app/ config project.js config.js src/ component css img js lib
Omi命令列介面omi-cli釋出
寫在前面 通常認為,命令列介面(CLI)沒有圖形使用者介面(GUI)那麼方便使用者操作。但是CLI比GUI節約資源,在熟悉命令之後,CLI會比GUI更加高效地幫你完成想要的任務。 下面來介紹下pasturn童鞋為Omi開發的CLI的兩種使用姿勢: 姿勢一 $ npm install omi-cli -g
xmake v2.3.7 釋出, 新增 tinyc 和 emscripten 工具鏈支援
[xmake](https://github.com/xmake-io/xmake) 是一個基於 Lua 的輕量級跨平臺構建工具,使用 xmake.lua 維護專案構建,相比 makefile/CMakeLists.txt,配置語法更加簡潔直觀,對新手非常友好,短時間內就能快速入門,能夠讓使用者把更多的精力集
最新版Swagger 3升級指南和新功能體驗!
Swagger 3.0 釋出已經有一段時間了,它於 2020.7 月 釋出,但目前市面上使用的主流版本還是 Swagger 2.X 版本和少量的 1.X 版本,然而作為一名合格的程式設計師怎麼能不折騰新技術呢?所以本期就大家帶來一篇最新版 Swagger 的內容,本文會帶大家看最新版 Swagger 有哪些改
vue-cli 配置項目名和域名
bsp cal mage ges run 圖片 反向 http image 默認運行 npm run dev 域名為localhost:8080 但是需要配置反向代理,這時候就需要去配置域名跟項目名 vue-cli 配置項目名和域名
最新版的node安裝和配置註意事項
執行 plain dex bsp 相關 系統 exp 一個 完成 node在安裝的時候,如果你不想用默認的安裝路徑,可以自定義路徑進行安裝,例如我的安裝路徑如下:F:\Program Files\nodejs 安裝完成後,要對node進行配置: 在F:\Program Fi
在vue-cli項目中mockjs和vConsole的使用
turn enc image error RR http 控件 items main mockjs使用 1.安裝npm install mockjs 2.在src/assets目錄下創建個util文件夾,並在裏新建一個文件mock.js 例如: const Mock =
分享一次OPENssh批量升級過程和升級腳本
Linux shell Openssh 1 ssh版本檢查本文檔針對於ssh版本低於7.0的系統,升級為openssh7.5 p1。ssh –V [root@kuajing-db3 ~]# ssh -V OpenSSH_5.3p1, OpenSSL 1.0.0-fips 29 M
架構師升級步驟和平時的工作內容!
Java 架構師 架構 Java程序員 之前有網友說想看架構師升級的文章,所以寫了本文。先給本文中架構師做個定義:第一,能力上達到(似乎是廢話),第二,公司肯承認,不僅能給架構師的頭銜,更能按架構師的標準發工資。 對於程序員來說,架構師是職業發展的一道坎,如果跨過去了,後面就前途無量了,否則可
最新版pycharm,安裝和激活,今天看的,當作筆記記下來,我會永生!
就是 如果 pychram 下載 3.1 option sig 圖片 pre ONE 下載pycharm 下載鏈接 https://www.jetbrains.com/pycharm/download 根據自己所需要的下載,具體自己看了,大家都會。 安裝pych
新一代免費私有云平臺Nano v0.5.1釋出 - 新增中文化支援/故障遷移/主機遷移
大家好,又一個重大更新發布了。 首先,為了便於國內使用者使用,0.5.1加入了中文支援,大部分介面和資訊已經漢化。只需要在頁面切換即可,瀏覽器會自動儲存,持續生效。 其次,增加了故障切換功能以加強叢集的高可用性。對於使用了NFS共享儲存的計算資源池,只需要在修改介面開啟新增的故障切換開關即可。當計算資
centos7升級核心和驅動以及安裝ceph
sed -i ‘s/SELINUX=enforcing/SELINUX=disabled/’ /etc/selinux/config systemctl stop firewalld systemctl disable firewalld export http_proxy=http://.
邏輯迴歸(LR)和支援向量機(SVM)的區別和聯絡
1. 前言 在機器學習的分類問題領域中,有兩個平分秋色的演算法,就是邏輯迴歸和支援向量機,這兩個演算法個有千秋,在不同的問題中有不同的表現效果,下面我們就對它們的區別和聯絡做一個簡單的總結。 2. LR和SVM的聯絡 都是監督的分類演算法。 都是線性分類方法 (不考慮核函式時)。 都是判別
破界!Omi生態omi-mp釋出,用小程式開發生成Web
omi-mp 是什麼 Omi 框架是微信支付線研發部和 AlloyTeam 開源的通用 Web 元件化框架,基於 Web Components,用來開發 PC、手機瀏覽器或者微信、手Q webview 的 Web 頁面。自今年5月開源以來,該專案共獲得 Star 數 5000+,擁有貢獻者29人。經過
UBTC Electrum輕錢包v3.3.4最新版釋出(附註意事項)
UBTC Electrum輕錢包最新版v3.3.4釋出,下載連結:https://github.com/UnitedBitcoin/electrum/releases/ 此次新版本支援用多重簽名地址進行URC20代幣(Token)的轉賬。  
好文 | 架構師更多的是和人打交道,說說我見到和聽說到的架構師升級步驟和平時的工作內容
之前有網友說想看架構師升級的文章,所以寫了本文。先給本文中架構師做個定義:第一,能力上達到(似乎是廢話),第二,公司肯承認,不僅能給架構師的頭銜,更能按架構師的標準發工資。 對於程式設計師來說,架構師是職業發展的一道坎,如果跨過去了,後面就前途無量了,否則可
Ros學習——C++釋出器publisher和訂閱器subscriber
1.編寫釋出器 初始化 ROS 系統 在 ROS 網路內廣播我們將要在 chatter 話題上釋出 std_msgs/String 型別的訊息 以每秒 10 次的頻率在 chatter 上釋出訊息 在 beginner_tutorials pack