1、安裝插件
處理less:
npm install less-loader --save-dev
處理sass:
npm install sass-loader --save-dev
2、項目目錄:
layer.less爲:
.layer{
width: 600px;
height: 200px;
background-color: green;
> div{
width: 400px;
height: 200px;
background-color: red;
}
.flex{
display: flex;
}
}
layer.js爲:
import './layer.less';
//import tpl from './layer.html';
function layer(){
return {
name:'layer',
tpl:tpl
}
}
export default layer;
3、webpack.config.js配置文件(以編譯less爲例)
var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'js/[name].js' }, module: { loaders: [{ test: /\.js$/, //以下目錄不處理 exclude: /node_modules/, //只處理以下目錄 include: /src/, loader: "babel-loader", //配置的目標運行環境(environment)自動啓用需要的 babel 插件 query: { presets: ['latest'] } }, //css 處理這一塊 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { //支持@important引入css importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要寫在require("autoprefixer")前面,否則require("autoprefixer")無效 require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } } ] }, //less 處理這一塊 { test: /\.less$/, use: ['style-loader', { loader: 'css-loader', options: { //支持@important引入css importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要寫在require("autoprefixer")前面,否則require("autoprefixer")無效 require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } }, 'less-loader' ] } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html' }) ] }
注意:postcss-loader在css-loader後,在less-loader前。
4、執行編譯&查看效果
npm run webpack