Question

我正在创建一个小型CSS库，以便在我的所有项目中使用它。

为了方便访问，我设置了一个节点项目，其中包含一个简单的服务器，该服务器提供一个带有库的展示的静态页面。

现在，我想将所有.scss文件捆绑在一个.css文件中，这样，在我要导入库的项目中，我不需要设置sass-loader但是我将能够直接导入.css捆绑文件。

这是项目的结构：

try {
  Long startDate = 20171114L;
  Long endDate = 20171116L;
  BasicDBObject data = new BasicDBObject();
  data.put("Date", new BasicDBObject( new BasicDBObject( "$gte", startDate).append("$lte", endDate)));
} catch(ParseException e){
  e.printStackTrace
}

Index.html是库的简单展示，main.js是服务index.html的web服务器，webpack.conf.js是以下文件：

/
|_assets
|      |_ _aux.scss
|      |_ _mixins.scss
|      |_ _lib.scss
|
|_index.html
|_webpack.conf.js
|_main.js

当我执行命令时：

  const CssEntryPlugin = require("css-entry-webpack-plugin");

  module.exports = {
      entry: {
          "styles": "assets/lib.scss"
      },
      output: {
          path: "assets",
          filename: "lib.css"
      },
      module: {
          rules: [
              {
                  test: /\.scss$/,
                  use: [{
                      loader: "style-loader" // creates style nodes from JS strings
                  }, {
                      loader: "css-loader" // translates CSS into CommonJS
                  }, {
                      loader: "sass-loader" // compiles Sass to CSS
                  }]
              }
          ]
      },
      plugins: [
          new CssEntryPlugin({
              output: {
                  filename: "lib.css"
              }
          })
      ]
  };

我收到以下错误：

webpack webpack.conf.js

我错过了什么？

webpack配置仅适用于css

0 个答案: