webpack-dev-server，webpack如何将css文件分离的,webpack--css：Less文件的打包和分离(八)

目录结构

before

after

webpack-dev-server。webpack.config.js

文件内容

src/css/index.less

@blue :#00aaee;

Webpack多入口css。#jie{

width: 100px;

height: 100px;

p{

webpackcss。color: @blue;

}

}

entry.js

webpackpostcss，import css from './css/index.css';

import less from './css/index.less';

document.getElementById('title').innerHTML = "hello11111";

安装依赖

js中使用css好处？cnpm install less less-loader --save-dev

配置less-loader

less打包到entry.js里

{

webpack vue？test: /\.less$/,

use: [{

loader: 'style-loader'

}, {

vue-cli3，loader: 'css-loader'

}, {

loader: 'less-loader'

}]

@vue/cli。}

less打包到index.css里

{

test: /\.less$/,

webpack性能优化？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",

},