webpack报错no postcss config...

终端里运行的错误:

查了好多资料,最后找到解决办法,改为:

const webpack = require(‘webpack‘);
// const autoprefixer = require(‘autoprefixer‘);
// const values = require(‘postcss-modules-values‘);
module.exports = {
  devtool: ‘eval-source-map‘,

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  module: {//在配置文件里添加JSON loader
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude:/node_modules/,
        loader:‘babel-loader‘,
        query:{
            presets:[‘es2015‘,‘react‘]
        }
      },
      {
        test:/\.css$/,
        use:[
          {
              loader: ‘style-loader‘,
          },
          {
              loader: ‘css-loader‘,
              options: {
                  importLoaders: 1,
              }
          },
          {
            loader:"postcss-loader",
            options: {           // 如果没有options这个选项将会报错 No PostCSS Config found
                plugins: (loader) => [
                    require(‘autoprefixer‘)(), //CSS浏览器兼容
                ]
            }
          }
        ]
        // loader:‘style-loader!css-loader?modules!postcss-loader‘
      }
    ]
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
        options:{
          // postcss: function () {
          //   return [
          //     require("autoprefixer")({
          //         browsers: [‘last 10 Chrome versions‘, ‘last 5 Firefox versions‘, ‘Safari >= 6‘, ‘ie > 8‘]
          //     })
          //   ]
          // },
          // plugins: (loader) => [
          //     require(‘autoprefixer‘)(), //CSS浏览器兼容
          // ],
          devServer: {
            contentBase: "./public",
            colors: true,
            historyApiFallback: true,
            inline: true
          }
        }
    })
  ]
}

但是,这里?modules不起作用了,后面再看看怎么书写

时间: 2024-08-15 15:15:39

webpack报错no postcss config...的相关文章

npm run build报错 No PostCSS Config found in

在项目根目录新建postcss.config.js文件,并对postcss进行配置: module.exports = { plugins: [ require('autoprefixer')//自动添加css前缀 ] }; 原文地址:https://www.cnblogs.com/xulei1992/p/11811836.html

webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"?

webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"? 原因: babel-core和babel-preset-env依赖被替换为@babel/core和@babel/preset-env,因为新版本的Babel7中对

webpack报错:Cannot assign to read only property 'exports' of object '#<Object>'

这个倒霉错误在mac电脑上开发的时候非常顺利,可是用windows的时候就会报错. 百度查不到,google一查果然有. 原因是:The code above is ok. You can mix require and export. You can't mix import and module.exports. 也就是说,在webpack打包的时候,可以在js文件中混用require和export.但是不能混用import 以及module.exports. 于是查了一下代码,在自己的ma

phpize建立PHP扩展报错Cannot find config.m4.

首先进入PHP的源码安装包目录下面执行一条命令: cd /home/oldboy/tools/php-5.5.32/ext/ ./ext_skel --extname=redis 然后进入到扩展目录,可以看到如下三个文件,分别进行编辑: cd redis/ ls config.m4 redis.c php_redis.h 操作前养成备份的习惯按照顺序先编辑config.m4将 > dnl PHP_ARG_ENABLE(redis, whether to enable redis support,

Echarts报错[MODULE_MISS]"echarts/config" is not exists!

项目用到Echarts插件,时下比较流行的是模块化包引入,但是很悲催的是楼主用的是标签式引入,所以从官网copy来的代码总是报一个 [MODULE_MISS]"echarts/config的错误,在这里,楼主对模块化包引入并没有学习,所以此文只是提醒那些项目用了标签式引入的同学们 啰嗦一句,所谓标签式引入就是用js的标签引入在html页面中导入js文件 形如 : <script type="text/javascript" src="${cxtPath}/as

mvc 项目运行报错检查web.config

最近写mvc项目,只是一个简单的添加信息管理信息列表的网站程序,当我挂在iis7.0上时候运行发现报错,请求问题导致,后来我在我的配置文件里加了一句话解决了. <system.webServer> <modules runAllManagedModulesForAllRequests="true"/> <validation validateIntegratedModeConfiguration="false" /> <ha

webpack报错需要合适的loader

以前做vue项目都好好的,最近做react,公共配置感觉加个jsx就可以了吧,然而不是这样的. 一.问题描述 You may need an appropriate loader to handle this file type. 二.问题分析 babelrc我配置了,babel-loader也配置正确,问题出现在include值上面,还原现场. module: { rules: [{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: '

Plugin/Preset files are not allowed to export objects,webpack报错/babel报错的解决方法

1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依赖包不兼容. 可以查看你的 package.json 的依赖列表 即有 babel 7.0 版本的( @babel/core , @babel/preset-react ) 也可命令查看 bebel-cli 的版本 ( babel -V ) 也有 babel 6.0 版本的 ( [email protected] , [email protected] , [email protected] ) 如果

webpack 报错 path is not defind

webpack.config.js里的内容是这样的,注意标红的地方: 首先,绝对路径'./dist'是 没有问题的 那么,查了很多,最后看到别人的webpack.config.js里面这样写着,现在const里面声明在用: 最后成功运行.