目录结构
before
after
文件内容
index.html
<div id="biao">
<p>ss</p>
</div>
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