webpack--css：Less文件的打包和分离(八)

目录结构

before

after

webpack.config.js

文件内容

src/css/index.less

@blue :#00aaee;
#jie{
    width: 100px;
    height: 100px;
    p{
        color: @blue;
    }
}

entry.js

import css from './css/index.css';
import less from './css/index.less';
document.getElementById('title').innerHTML = "hello11111";

安装依赖

cnpm install less less-loader --save-dev

配置less-loader

less打包到entry.js里

            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'less-loader'
                }]
            }

less打包到index.css里

            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader'
                    }, {
                        loader: 'less-loader'
                    }],
                    fallback: 'style-loader'
                })
            }

运行npm run server 直接在浏览器打开

package.json 中增加--open

  "scripts": {
    "server": "webpack-dev-server --open",
  },