webpack處理 css\less\sass 樣式的方法
本文介紹了webpack處理 css\less\sass 樣式的方法,分享給大家,具體如下:
(一)處理普通的.css 文件,需要安裝 css-loader,style-loader
.less 文件,需要安裝 less-loader
.sass 文件,需安裝 less-loader
npm install --save-dev css-loader npm install --save-dev css-loader npm install less-loader --save-dev
(二)在項(xiàng)目中,我們會(huì)遇到 不同瀏覽器,前綴不同。比如 display: flex ,在IE以及谷歌下前綴是不同的,
這時(shí)候,我們需要 postcss 這樣的插件
npm install postcss-loader --save-dev npm install autoprefixer --save-dev
安裝好相關(guān)loader后,我們需要在webpack.config.js 中 加入相關(guān)配置代碼,如下
var htmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); console.log(__dirname); module.exports = { /*context: __dirname,*/ entry: './src/app.js', output: { path: './dist', filename: 'js/[name]-bound.js'//生成后的文件名 為 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js }, module: { loaders: [ { test: /\.css$/, //正則表達(dá)式,匹配.css文件 loader: 'style!css?importLoaders=1!postcss' //處理順序 從右到左 // ?importLoaders=1 表示 引入嵌入的 css文件也會(huì)按照postcss這樣自動(dòng)添加前綴 }, { test: /\.less$/, loader: 'style!css!postcss!less' } ], rules: [{ test: /\.(css|scss|less)$/, loader:"style-loader!css-loader?importLoaders=1!postcss-loader" //由于webpack2.X 版本對post-css書寫方式的改變 //需要新添加 postcss.config.js }] }, plugins: [ new htmlWebpackPlugin({ filename: 'index.html', //通過模板生成的文件名 template: 'index.html',//模板路徑 inject: 'body' //是否自動(dòng)在模板文件添加 自動(dòng)生成的js文件鏈接 }) ] };
postcss.config.js 代碼如下
module.exports = { plugins: [ require('autoprefixer')({ browsers: 'last 5 version' //前五種瀏覽器版本 }) ] };
import layer from './components/layer/layer.js'; import './css/common.css'; const App = function () { console.log(layer); } new App();
layer.js
import './layer.less'; function layer(){ return{ name:'layer', tpl:'tpl' }; } export default layer;
//layer.less .layer{ width:600px; height: 200px; border: 1px solid yellow; } //common.css @import "flex.css"; html{ background-color: red; } ul,li{ padding:0; margin:0; list-style:none; } .styleFlex { display: flex; } //flex.css .flexFlex { display: flex; }
使用webpack 編譯后,可以查看,相關(guān)css以及被編譯在index.html,前綴css 自動(dòng)完成。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家?! ?/p>
相關(guān)文章
js實(shí)現(xiàn)獲取最新本周周一開始的日期(單周日歷卡)
這篇文章主要為大家介紹了js實(shí)現(xiàn)獲取最新本周周一開始的日期(單周日歷卡)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10js網(wǎng)頁中的(運(yùn)行代碼)功能實(shí)現(xiàn)思路
網(wǎng)頁中的"運(yùn)行代碼"是一個(gè)很方便的功能,可以直接看到代碼的效果,感興趣的朋友不妨參考下,或許對你學(xué)習(xí)js有所幫助,好了花不多說切入正題2013-02-02javascript實(shí)現(xiàn)詳細(xì)時(shí)間提醒信息效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)詳細(xì)時(shí)間提醒信息效果的方法,涉及javascript操作時(shí)間的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法
這篇文章主要介紹了JS使用eval()動(dòng)態(tài)創(chuàng)建變量的方法,詳細(xì)分析了eval函數(shù)的功能及使用eval函數(shù)實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建變量的步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-06-06js+html5操作sqlite數(shù)據(jù)庫的方法
這篇文章主要介紹了js+html5操作sqlite數(shù)據(jù)庫的方法,以完整實(shí)例形式分析了JavaScript封裝的html5操作SQLite數(shù)據(jù)庫類,并分析了具體使用技巧,需要的朋友可以參考下2016-02-02JavaScript設(shè)計(jì)模式--簡單工廠模式定義與應(yīng)用案例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式--簡單工廠模式定義與應(yīng)用,結(jié)合具體案例形式詳細(xì)分析了JavaScript設(shè)計(jì)模式中簡單工廠模式基本概念、定義、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05