webpack如何将css文件分离的,webpack--css：scss文件的打包和分离(九)

目录结构

before

after

文件内容

index.html

ss

src/css/index.scss

$biao-color:#fff;

#biao{

$width:100px;

width: $width;

height: 100px;

p{

color: $biao-color

}

}

entry.js

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

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

import sass from './css/index.scss';

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

webpack.config.js

安装依赖

因为sass-loader要依赖node-sass,所以要安装

cnpm install node-sass sass-loader --save-dev

index.scss文件打包到entry.js

{

test: /\.scss$/,

use: [{

loader:'style-loader'

},{

loader:'css-loader'

},{

loader:'sass-loader'

}]

},

index.scss文件打包到index.css

{

test: /\.scss$/,

use: ExtractTextPlugin.extract({

use: [{

loader: 'css-loader'

}, {

loader: 'sass-loader'

}],

fallback: 'style-loader'

})

},

打包，运行

npm run build

npm run server