WebPack详细入门教程（七）之css和sass的处理

webpack引入css

安装依赖 npm install --save-dev css-loader style-loader

//main.js中引入.css文件

require('../css/index.css'); 或 import '../css/index.css';

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/demo/js/main.js', 
    output: { 
        filename: 'index.js', 
        path: __dirname + '/out' 
    },
    module: {
        rules: [
            {	
	            test: /\.css$/, 
                loader: 'style-loader!css-loader'
            }　　　
        ]　
    }
}

rules是一个数组，指定多个Rule，Rule.loader 是 Rule.use: [ { loader } ] 的简写

---

webpack引入sass

安装依赖 npm install --save-dev sass-loader

//main.js中引入.scss文件

require('../css/index.scss'); 或 import '../css/index.scss';

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + '/demo/js/main.js',
    output: {
        filename: 'index.js',
        path: __dirname + '/out'
    },
    module: {
        rules: [
            {	
	            test: /\.scss$/, 
                loader: 'style-loader!css-loader!sass-loader'
            }　　　
        ]　
    }
}