替换一下这个，试试

{
    test: /\.css$/,
    use: [//loader解析顺序：先postcss->然后css->最后style-loader
        'style-loader',
        {
            loader: 'css-loader',
            options: {importLoaders: 1}
        },//importLoaders默认是0，意思是一个加载器都不用，
        // 1:用postcss-loader加载器处理，
        // 2:用postcss-loaders和sass-loader加载器处理
        {
            loader: "postcss-loader",
            options: {
                plugins: [
                    require("autoprefixer")({//自动增加浏览器前缀(-webkit-等)
                        browsers: ['last 5 versions']
                    })
                ]
            }
        }
    ]
}

这里的配置webpack4下是可以运行的

var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: __dirname + '/src/app.js',
    output: {
        path: __dirname + "/dist",
        filename: "js/[name].bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                loader: "babel-loader"
            },
            {
                test: /\.css/,
                use: [
                    'style-loader',
                    'css-loader?importLoaders=1',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: [
                                        "last 10 version"
                                    ]
                                }),
                            ],
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: [
                                        "last 10 version"
                                    ]
                                }),
                            ],
                        }
                    }, {
                        loader: "less-loader", options: {
                            sourceMap: true
                        }// compiles Less to CSS
                    }]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: [
                                        "last 10 version"
                                    ]
                                }),
                            ],
                        }
                    },// translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            inject: 'body'
        })
    ]
}

css配置也发一下

这是IDE自带的功能，ZENDSTUDIO里面自带的parseInt(style.left);?就ok

你对照看一下

{

                test:/\.css$/,

                loader:'style-loader!css-loader?importLoaders=1!postcss-loader',  

            },

            {

                test:/\.less$/,

                loader:'style-loader!css-loader!postcss-loader!less-loader'

            }

这样就可以了

postcss-loader需要配置，至于为什么我也不知道.....

const postcssConfig = {

   loader: 'postcss-loader',

   options: {

       plugins: (loader) => [

           require('postcss-import')({root: loader.resourcePath}),

           require('autoprefixer')() //CSS浏览器兼容

       ]

   }

}

{

               test: /\.less$/,

               use: [

                   'style-loader',

                   'css-loader',

                   postcssConfig,

                   'less-loader'

               ]

           }

你把你的config文件截图我看看，这是因为你的less没配置好

你把配置贴出来一下

这位同学，，import是CommonJs里面引用模块的方法，@import是CSS中引入其他css文件的方法。

你这-g都是全局安装的,需要在项目目录下安装

看下webpack配置

解决了，在less 里面写全 。我的是webpack 3.0版本的

use:[ {loader: 'style-loader'},

             {loader: 'css-loader',options:{importLoaders:1}}, 

             {loader: 'postcss-loader'},

             {loader: 'less-loader',}

            ],

就行

可能是你没有npm安装less，需要先安装less插件$ npm less --save-dev

可能是因为你的是webpack2.0，通过@import引入的话要下载个postcss-import插件，在命令行工具输入npm install postcss-import --save-dev 然后再在代码中获取这个插件

{
    test:/\.css$/,
    use:[
        'style-loader',
        {loader:'css-loader',options:{importLoaders:1}},
        {
            loader:'postcss-loader',
            options:{
                plugins:function(){
                    return [
                        require('postcss-import')(),        //一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
                        require("autoprefixer")({browsers:['last 5 versions']})
                    ]
                }
            }
        }
    ]
},

没有那个点

把div前面的点去掉

使用cnpm install node-sass --save-dev

那是less 语法，  视频中原文是  . > div  继承父类 样式  他是嵌套在里面的。

不错，写得好，棒极了

原来是少写一个命令cnpm i less --save-dev

呃，我的也是，不过我又重新安装了一下less-loader然后就没问题了

你安装npm的问题，是安装在全局还是局部

less-loader没有安装吧

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

首先安装sass-loader，scss-loader，node-sass  这三个loader。然后按照上面的配置就可以了

原因:

https://github.com/lmk123/blog/issues/28

看layer.js文件中是否引入了样式文件或者模板文件
引入样式文件的话，要安装对应的处理样式的loader并进行配置
引入模板文件的话，要安装对应的处理模板的的loader并进行配置
之后再重新编译试下