Question

我已经编写了webpackconfig，但是css似乎没有正常工作，它正在抛出并出错。以下是我的文件包含。

我的webpack.config.js：

module: {
    loaders: [
      {
        test: /\.js?/,
        include: SRC_DIR,
        loader: "babel-loader",
        query: {
          presets: ["react", "es2015", "stage-2"]
        }
      }
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      }
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css", {
      allChunks: true
    })
  ]
};

在我的Index.js中我添加了：

import '../assets/css/style.css';

Package.json：

{
  ...
  "dependencies": {...
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3",
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0"
  }
}

Answer 1

根据我们的chat，这就是您的webpack.config.js文件如下所示：

var path = require("path"); 

var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
  entry: SRC_DIR + "/app/index.js", 
  output: { 
    path: DIST_DIR + "/app", 
    filename: "bundle.js", 
    publicPath: "/app/" 
  }, 
  module: { 
    loaders: [ 
      { 
        test: /\.js?/, 
        include: SRC_DIR, 
        loader: "babel-loader", 
        query: { 
          presets: ["react", "es2015", "stage-2"] 
        }
      } 
      { 
        test: /\.css$/, 
        loaders: ["style-loader", "css-loader", "sass-loader"] 
      } 
      { 
        test: /\.less$/, 
        loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
      } 
    ] 
  }, 
  plugins: [ 
    new ExtractTextPlugin("src/components/assets/css/style.css", { 
      allChunks: true 
    }) 
  ] 
}; 

module.exports = config;

此配置存在两个问题。

没有逗号分隔loaders个对象。
您正在使用ExtractTextPlugin，但尚未在配置中的任何位置导入/需要它。

问题＃1很明显如何解决;只需在加载器对象的每个定义之后添加逗号。

问题＃2，您需要在webpack配置文件中安装和引用ExtractTextPlugin。

您可以在终端中运行以下命令来执行此操作：

npm install --save-dev extract-text-webpack-plugin

这会将插件安装到node_modules，并将其列在package.json file under the devDependencies`对象中。

然后在您需要模块的webpack.config.js中，还需要这样的插件：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

进行这些更改后，配置文件应如下所示：

var path = require("path"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
  entry: SRC_DIR + "/app/index.js", 
  output: { 
    path: DIST_DIR + "/app", 
    filename: "bundle.js", 
    publicPath: "/app/" 
  }, 
  module: { 
    loaders: [ 
      { 
        test: /\.js?/, 
        include: SRC_DIR, 
        loader: "babel-loader", 
        query: { 
          presets: ["react", "es2015", "stage-2"] 
        }
      },
      { 
        test: /\.css$/, 
        loaders: ["style-loader", "css-loader", "sass-loader"] 
      },
      { 
        test: /\.less$/, 
        loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
      } 
    ] 
  }, 
  plugins: [ 
    new ExtractTextPlugin("src/components/assets/css/style.css", { 
      allChunks: true 
    }) 
  ] 
}; 

module.exports = config;

如何在reactjs Project中添加CSS配置？

1 个答案: