Почему не импортируются стили с помощью postcss-import при сборке webpack?

Question

[Khm]

Использую следующий postcss.config.js:

const postcssImport = require("postcss-import");
const cssnext = require("cssnext");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");

module.exports = function() {
  return {
    plugins: [
      postcssImport,
      cssnext,
      autoprefixer({
        browsers: ["last 2 versions"]
      }),
      cssnano
    ]
  };
};

webpack.config.js:

module.exports = {
  entry: PATHS.app + "/js/application.js",

  output: {
    path: PATHS.build,
    filename: "js/[name].js"
  },

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: "pug-loader",
        options: {
          pretty: true
        }
      },
      
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 }
          },
          {
            loader: "postcss-loader",
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },

  devtool: env === "development" ? "eval-source-map" : "",
  
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: PATHS.app + "/templates/layouts/layout.pug"
    })
    ....
  ]
  ....
};

В результате получаю сломанную сборку

Answer 1

[Александр Мастеров]

Попробуйте явно указать путь до конфига postcss, и заодно немного его упростить:
webpack.config.js

{
  loader: 'postcss-loader',
  options: { 
    config: {
      path: require.resolve('./postcss.config.js')
    }
  }
}

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'cssnext': {},
    'autoprefixer': {
      browsers: ['last 2 versions']
    },
    'cssnano': {},
  }
};

Comments

[Khm]

К сожалению, не помогло, все та же ошибка.

[Александр Мастеров]

Khm: какая ошибка? Вы кроме примера двух конфигов ничего не показали.

[Khm]

В стилях добавляю импорт @import "core/config" ....
Далее при сборке получаю следующее:

ERROR in ./~/css-loader?{"modules":true,"importLoaders":1}!./~/postcss-loader/lib?{"config":{"path":"E://projects//webpack-project//postcss.con
fig.js"}}!./app/css/styles.css
    Module build failed: Error: Failed to find 'core/config'
        in [
            E:\projects\webpack-project\app\css
        ]
        at E:\projects\webpack-project\node_modules\postcss-import\lib\resolve-id.js:48:11

[Александр Мастеров]

Khm: мало информации по путям.

Попробуйте явно указать root-директорию или задать корректные пути до стилей: (советую второе)

const { resolve } = require('path');

'postcss-import': {
  root: resolve(process.cwd(), 'app', 'css'),
  path: [
    resolve(__dirname, 'app', 'css'),
  ]
}

[Khm]

Александр Мастеров: Спасибо за то, что пытаетесь помочь! Распишу поподробней, может быть станет ясней.

Структура папок такая:
Конфиг postcss:

const postcssImport = require("postcss-import");
const cssnext = require("cssnext");
const postcssInlineComment = require("postcss-inline-comment");
const postcssNested = require("postcss-nested");
const postcssColourFunctions = require("postcss-colour-functions");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");

module.exports = function() {
  return {
    plugins: [
      postcssImport,
      postcssInlineComment,
      cssnext,
      postcssNested,
      postcssColourFunctions,
      autoprefixer({
        browsers: ["last 2 versions"]
      }),
      cssnano
    ]
  };
};

webpack.config

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const env = process.env.NODE_ENV || "development";

const PATHS = {
  app: path.join(__dirname, "app"),
  build: path.join(__dirname, "build")
};

const config = {
  entry: PATHS.app + "/js/application.js",

  output: {
    path: PATHS.build,
    filename: "js/[name].js"
  },

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: "pug-loader",
        options: {
          pretty: true
        }
      },

      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader:"babel-loader",
          options: { presets: ["es2015"] }
        }]
      },

      {
        test: /\.(jpg|png|svg)$/,
        loader: "file-loader",
        options: {
          name: "img/[name].[ext]"
        }
      },
      
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },

  devtool: env === "development" ? "eval-source-map" : "",
  
  plugins: [
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(env)
    }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: PATHS.app + "/templates/layouts/layout.pug"
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      JQuery: "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: "common"
    }),  
  ]
};

if (env === "production") {
  config.module.rules.push({
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      publicPath: "./build",
      fallback: "style-loader",
      use: [
        {
          loader: "css-loader",
          query: {
            modules: true,
            importLoaders: 1
          }
        },
        {
          loader: "postcss-loader"
        }
      ],
    }),
  });

  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),

    new ExtractTextPlugin({
      filename: "./css/[name].css",
      allChunks: true
    })
  );
}
else {
  config.module.rules.push({
    test: /\.css$/,
    use: [
      "style-loader",
      {
        loader: "css-loader",
        options: { importLoaders: 1 }
      },
      {
        loader: "postcss-loader"
      }
    ]
  });

  config.devServer = {
    stats: "errors-only",
    port: 9000
  };
}

module.exports = config;

[Александр Мастеров]

Khm: У меня работает с указанным рутом или путям до стилей, но только через относительные пути: @import "./test";.

Для работы абсолютных путей похоже нужно писать свой resolve и load. Пока с этим странно.
Кстати, Вы также можете использовать Webpack для импорта: import './test';

[Александр Мастеров]

У меня заработало с абсолютными путями, думаю, что смогу сделать простой пример.

В Вашем случае, даже без указания путей и других настроек должно работать @import "core/config";.
Задайте явно context-директорию для Вебпака:
webpack.config.js

const { resolve } = require('path');

{
  context: resolve(__dirname, 'app')
}

[Khm]

Александр Мастеров: Спасибо за отклик) Я новичок в работе с webpack, наверно, что-то написано не так, поэтому на конкретно моем примере не сработало, код следующий:

const path = require("path");
const PATHS = {
  app: path.join(__dirname, "app"),
  build: path.join(__dirname, "build")
};

const config = {
  entry: PATHS.app + "/js/application.js",

  output: {
    path: PATHS.build,
    filename: "js/[name].js"
  },
 
  context: path.resolve(__dirname, 'app'),
  .....

Теперь такая ошибка: Module not found: Error: Can't resolve './core/config' ....

[Александр Мастеров]

Khm: у Вас на Гитхабе есть репозиторий с этим проектом? (или любым схожим)
В этом случае мне было бы проще сделать PR на исправление.

[Khm]

Александр Мастеров: Да. Заранее спасибо!

[Александр Мастеров]

Khm: мда, там банально было пропущено нижние подчеркивание в имени файла.

@import "core/_config";

В проекте на Гитхабе все файлы стилей имеют в название нижние подчеркивание _, если его не опускать и указывать, то всё работает в любом варианте.

[Khm]

Александр Мастеров: Ох...и правда, спасибо ОГРОМНОЕ, что провозились столько со мной) вроде заработало)