webpack 編譯less/scss文件

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章