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

目录结构

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