Vue学习18.2-----webpack打包处理scss文件

1、运行

npm i sass-loader node-sass -D

2、配置webpack.config.js文件

const path = require('path');
 
const HtmlWebpackPlugin = require('html-webpack-plugin');
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    //指定要用到的模板
    template:'./src/index.html',
    //指定生成的文件的名称，文件存在内存中，在目录中不显示
    filename:'index.html'
});
 
module.exports = {
    //编译模式
    mode:'development',//development production
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        //输出文件的路径
         path:path.join(__dirname,'./dist'),
         //输出文件名
         filename:'bundle.js'
    },
    plugins:[htmlPlugin],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},

            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
        ]
    }
 
};