webpack 編譯less/scss文件

一、安裝插件

處理less：

npm install less-loader --save-dev

處理sass：

npm install sass-loader --save-dev

二、項目目錄：

 

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;

三、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前。

四、執行編譯&查看效果

npm run webpack