Webpack/PostCSS - Невозможно использовать классы из встроенных стилей, сгенерированных Webpack

Question

Я пытаюсь настроить Webpack (PostCSS) в приложении CherryPy. Webpack появляется порождающим встроенных стилей правильно, следующий мой мой погрузчик в webpack.config.js

{ test: /\.css$/, loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader" }

Когда я бегу «Webpack», то, как представляется, правильно генерировать стили «тест-класса» из моя таблица стилей/main.css файл встроенный в основном генерироваться output.js файла ....

exports.push([module.id, ".W_8vO1mwnWhjGJpClgHqm {\n /* color: $matt; */\n color: green;\n background: red;\n}\n", ""]);

Сформированный output.js файла затем включаются в тег сценария в моей странице main.html. Однако, когда я пытаюсь использовать «тестовый класс», который генерируется выше, его применение не влияет на элемент. В документации WebPack, он упоминает следующее

// in your modules just require the stylesheet // This has the side effect that a <style>-tag is added to the DOM. require("./stylesheet.css");

Я не ясно, какой модуль это имеет в виду. Любое понимание было бы высоко оценено.

редактировать: обновление с полным webpack.config.js

`` `

const webpack = require('webpack'); 
const path = require('path'); 
//post css 
var precss  = require('precss'); 
var autoprefixer = require('autoprefixer'); 


module.exports = { 

    context: __dirname + '/app', 
    entry: "./test.js", 
    output: { 
    filename: 'almostTest.js', 
    path: path.join(__dirname, './static') 
}, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader" 
     } 
    ] 
    }, 
    postcss: [ 
       precss, 
       autoprefixer({ browsers: ['last 2 versions'] }) 
      ] 
} 

` ``

Answer 1

Чтобы использовать CSS в приложении в комплекте с помощью Webpack, вы должны import или require этот файл в ваш файл входа.

Практика, я беру это, чтобы создать index.css файл, который находится на том же месте, что и файл ввода index.js, а затем требовать его из файла index.js.

Затем, внутри index.css, вам требуются все ваши другие файлы CSS приложений.

Here is an example of a Webpack starter I've written importing the .scss file и the main .scss file which imports all of my other components style sheets via native imports which scss-loader treats like requires.

В противном случае, если стили не будут импортированы в файл ввод в некотором роде, стили не будут доступны для вашего приложения.

EDIT:

Я заметил, что вы modules= определены в вашем запросе загрузчика для css-loader это будет по умолчанию ваш CSS должен быть определен как css-modules. See here in the css-loader docs for more details

Короткий ответ: Удалить строку запроса из вашего определения загрузчика, так это выглядит: css-loader?importLoaders=1, и вы должны быть в состоянии увидеть ваши стили и получить к нему доступ из любого места в вашем приложении.