Webpack не загружает css
Это моя первая попытка настроить Webpack, поэтому я уверен, что мне чего-то не хватает.
Я пытаюсь загрузить свои файлы PostCSS с помощью Webpack, используя ExtractTextPlugin для создания файла css в"dist". Проблема в том, что Webpack, похоже, не подбирает файлы css. Они находятся в разделе "клиент / стили", но я попытался переместить их в" общий", с тем же результатом.
Я запустил Webpack с опцией --display-modules и проверил, что файлы css не отображаются там.
Я попытался запустить его без плагина извлечения текста, и результат тот же: CSS не встроен в пакет.js.
вот моя конфигурация prod:
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: [
'./client'
],
resolve: {
modulesDirectories: ['node_modules', 'shared'],
extensions: ['', '.js', '.jsx', '.css']
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loaders: ['babel']
},
{
test: /.css?$/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader!postcss-loader'
),
exclude: /node_modules/
}
]
},
plugins: [
new ExtractTextPlugin('[name].css')
],
postcss: (webpack) => [
require('postcss-import')({ addDependencyTo: webpack, path: ['node_modules', 'client'] }),
require('postcss-url')(),
require('precss')(),
require('postcss-fontpath')(),
require('autoprefixer')({ browsers: [ 'last 2 versions' ] })
]
};
и вот пример моего основного файла css: @импорт нормализовать.в CSS/нормализовать';
/* Variables */
@import 'variables/colours';
/* Mixins */
/* App */
/* Components */
body {
background-color: $black;
}
у кого-нибудь есть идея о том, почему это происходит? Я что-то упускаю?
спасибо
2 ответов
поскольку вы используете style-loader и css-loader. Вы можете включить css в сам файл js. Вы можете просто require(style.css)
или import(if es6)
css-файл в файле javascript, который использует стили. Нет необходимости предоставлять точку входа в webpack для css.
надеюсь, что это помогает.