sass-загрузчик с Webpack не генерирует CSS

1

Как использовать sass-loader для создания css файла из scss и встраивания его в html с помощью express.js. Я также использую реактивный нагреватель

Ниже приведен файл конфигурации

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HTMLWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
            template: __dirname + '/app/index.html',
            filename: 'index.html',
            inject: 'body'
        });


const path = require('path');

module.exports = {

    entry: ['react-hot-loader/patch',
            'webpack-hot-middleware/client?path=http://localhost:3000/__what',
            'webpack/hot/only-dev-server', //<- doesnt reload the browser upon syntax errors. This is recommended for React apps because it keeps the state
            //'webpack/hot/dev-server', //<- To perform HMR in the browser reloads if HMR update fails.
            __dirname + '/app/index.js'],

    context: __dirname,
    module:{
        loaders:[
            {
                test:/\.js$/,
                exclude: /node_modules/,
                loader:'babel-loader',
                query:{
                    presets:["react","es2015","stage-2"],
                    plugins: ["react-hot-loader/babel"]
                }
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract({fallback:'style-loader' ,use:['css-loader','sass-loader']}),
                include:path.resolve(__dirname, '/app/scss') 
            }
        ]
    },
    output:{
        filename:'payload-min.js',
        path: __dirname + '/build',
        publicPath: __dirname + '/build'
    },
    plugins:[HTMLWebpackPluginConfig ,
             new ExtractTextPlugin(__dirname + '/build/payload.css', {
                                  allChunks: true
             }),
             new webpack.HotModuleReplacementPlugin(),
             new webpack.NoEmitOnErrorsPlugin()]

};

index.js

...
require('css-loader!sass-loader!./scss/payload.scss');

Я никогда не вижу плагин под действием ниже

new ExtractTextPlugin(__dirname + '/build/payload.css', {
                                      allChunks: true
                 }),

выполнять

webpack -d или webpack не генерируют файл payload.css в /build

index.html

<link rel="stylesheet" type="text/css" href="build/payload.css">

Моя структура каталогов

.
├── app
│   ├── actions
│   │   └── index.js
│   ├── common
│   │   └── constants.js
│   ├── components
│   │   ├── App.js
│   │   ├── DetailsSection.js
│   │   ├── Device.js
│   │   ├── FirmwareImageDetails.js
│   │   ├── Menu.js
│   │   ├── Terminal.js
│   │   └── ViewJson.js
│   ├── index2.html
│   ├── index.html
│   ├── index.js
│   ├── reducers
│   │   ├── index.js
│   │   └── localStorage.js
│   └── scss
│       └── payload.scss
├── build
├── mock_payload.json
├── package.json
├── package-lock.json
├── payload_schema.json
├── README.md
├── server.js
├── webpack.config.js
└── webpack.server.config.js
  • 0
    Я не уверен на 100%, но я думаю, что вы, возможно, ExtractTextPlugin загрузчики в линию. Можете ли вы попробовать просто запросить файл scss без загрузчиков впереди? Например, require('./scss/payload.scss'); и посмотреть, если это работает?
  • 0
    Я попробовал это. В этом сценарии babel пытается проанализировать требование, и я получаю эту ОШИБКУ в ./app/scss/payload.scss Ошибка при разборе модуля: /home/ekam/devel/payloadApp/app/scss/payload.scss Неожиданный токен (6 : 5) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов. | * Большинство из них унаследованы от Base, но я хочу изменить несколько. | * / | тело {| цвет: # 333; | } @ ./app/index.js 36: 0-30 @ multi-response-hot-loader / patch webpack-hot-middleware / client? path = localhost: 3000 / __ what webpack / hot / only-dev-server ./app /index.js
Теги:
express
webpack
sass-loader

1 ответ

0

Проблема заключается в

include:path.resolve(__dirname, '/app/scss') 

в загрузчике, удаляющем эту строку, генерируется файл css.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню