Импорт стилей из ./styles.css возвращает пустой объект - PullRequest
Новая
       52

Импорт стилей из ./styles.css возвращает пустой объект

0 голосов
/ 10 января 2019

В нашем приложении Elixir / Phoenix мы недавно перешли с brunch на webpack (по умолчанию для Phoenix сейчас).
Мы использовали для импорта нашего CSS в javascript, как это: 

import CSS from "./style.css";

Который дал доступ к сопоставлениям модулей CSS: 

console.log(CSS);
{hero: "_page_23f2e__example"}

Но после перехода на Webpack CSS содержит пустой объект. Даже если файл style.css.json присутствует и содержит сопоставления.

Я заметил, что импорт ./style.css.json возвращает сопоставления, но при таком подходе возникают ошибки при сборке / развертывании. Кроме того, это не похоже на способ по умолчанию в Webpack.

Я что-то упустил в нашей реализации? Любая помощь приветствуется!

Я создал репозиторий для детской площадки, чтобы проверить и проиллюстрировать проблему: https://github.com/DefactoSoftware/cells_and_modules

Мы работаем с Phoenix 1.4.0, Webpack 4.4.0, postcss-modules 1.4.1

Наше приложение имеет следующую структуру файлов: 

|– assets
| |– css
| | |– app.css
| |– js
| | |– app.js
|– lib
| |– views
| | |- page
| | | |– index.js
| | | |– style.css
| | | |– template.html.eex
| | | |– view.ex
|– package.json
|– postcss.config.js    (setup below)
|– webpack.config.js    (setup below)

webpack.config.js 

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    app: ["./assets/js/app.js"].concat(
      glob.sync("./lib/cells_and_modules_web/views/**/*.css"),
      glob.sync("./lib/cells_and_modules_web/views/**/*.js")
    )
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "priv/static")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(["priv/static"]),
    new MiniCssExtractPlugin({ filename: "css/[name].css" }),
    new CopyWebpackPlugin([{ from: "./assets/static/", to: "./" }])
  ]
});

postcss.config.js 

const path = require("path");
const md5 = require("md5");

module.exports = {
  ident: "postcss",
  plugins: {
    "postcss-modules": {
      generateScopedName: function(name, filename, css) {
        const relativeFileName = path.relative(process.cwd(), filename);
        const directories = path.dirname(filename).split("/");
        const directory = directories.slice(-1);
        const hash = md5(relativeFileName).substring(0, 5);

        return "_" + directory + "_" + hash + "__" + name;
      }
    }
  }
};
...