Webpack 和 css less,scss

1 安装加载器 Loader

[ahcj@localhost learn-webpack]$ npm install --save-dev  css-loader style-loader
[ahcj@localhost learn-webpack]$ npm install --save-dev  less less-loader 
[ahcj@localhost learn-webpack]$ npm install --save-dev  node-sass sass-loader 

2 修改webpack.config.js,添加 module 配置项目

module.exports = {
  devtool: 'source-map', //在一个单独的文件中产生一个完整且功能完全的source map
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    port:8080, //默认监听端口，如果省略，默认为”8080“
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
  module: { 
      rules: [ 
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
      ] 
  }
}

3 新增 css 文件

app/greet.css

.box {
  color: blue;
  background-color: red;
  padding: 10px;
  border: 3px solid #ccc;
  opacity: 0.5;
  margin: 100px;
}

4 新增 less 文件

app/main.less

@base: #f938ab;
html,body {
  background:@base;
}

5 运行

[ahcj@localhost learn-webpack]$ npm run serve

屏幕截图.png