目录结构
before
after
文件内容
index.css
body{ background-color: red; color: white;}#image{ width: 28px; height: 28px; background-image: url(../images/aaaa.png); transform: rotate(30deg); box-shadow: 10px 10px 10px;} index.less
@blue :#00aaee;#jie{ width: 100px; height: 100px; transform: rotate(30deg); box-shadow: 10px 10px 10px; p{ color: @blue; }} index.scss
$biao-color:#fff;#biao{ $width:100px; width: $width; height: 100px; transform: rotate(30deg); box-shadow: 10px 10px 10px; p{ color: $biao-color }} postcss.config.js
安装依赖
cnpm install --save-dev postcss-loader autoprefixer
module.exports = { plugins: [ require('autoprefixer') ]} webpack.config.js
module: { //规则 rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", // use: "css-loader" use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) }, { test: /\.less$/, use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'less-loader' },'postcss-loader'], fallback: 'style-loader' }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'sass-loader' }, 'postcss-loader'], fallback: 'style-loader' }) }, ] }, 打包，运行
npm run buildnpm run server
全部webpack.config.js
const path = require('path');const uglify = require('uglifyjs-webpack-plugin');const htmlPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require("extract-text-webpack-plugin");var website = { publicPath: "http://192.168.1.9:1717/"}module.exports = { // 入口 entry: { entry: './src/entry.js', }, // 出口 output: { //绝对路径 path: path.resolve(__dirname, 'dist'), filename: '[name].js', publicPath: website.publicPath }, // 模块 module: { //规则 rules: [ // { // test: /\.css$/, // use: [ // { // loader:'style-loader' // } // ] // }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", // use: "css-loader" use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) }, { test: /\.(png|jpg|gif)/, use: [{ loader: 'url-loader', options: { limit: 5000, outputPath: 'images/', } }] }, { test: /\.(htm|html)$/i, use: ['html-withimg-loader'] }, // { // test: /\.less$/, // use: [{ // loader: 'style-loader' // }, { // loader: 'css-loader' // }, { // loader: 'less-loader' // }] // } { test: /\.less$/, use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'less-loader' },'postcss-loader'], fallback: 'style-loader' }) }, // { // test: /\.scss$/, // use: [{ // loader:'style-loader' // },{ // loader:'css-loader' // },{ // loader:'sass-loader' // }] // }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'sass-loader' }, 'postcss-loader'], fallback: 'style-loader' }) }, ] }, //插件 plugins: [ // new uglify() new htmlPlugin({ minify: { removeAttributeQuotes: true }, hash: true, template: './src/index.html' }), new ExtractTextPlugin("css/index.css"), ], //开发服务 devServer: { contentBase: path.resolve(__dirname, 'dist'), host: '192.168.1.9', compress: true, //服务端是否启用压缩 port: 1717 }}