1

如何使用 sass-loader 从 scss 生成 css 文件并使用 express.js 将其嵌入到 html 中。我也在使用 react-hot-loader

下面是我的配置文件

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', //<- doesn’t 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 不会在 /build 下生成 payload.css 文件

索引.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
4

1 回答 1

0

问题在于

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

在删除此行的加载程序中生成了 css 文件。

于 2017-08-31T23:53:44.193 回答