带有 Webpack 的 sass-loader 不会生成 CSS

Posted 2023-02-22

【中文标题】带有 Webpack 的 sass-loader 不会生成 CSS

【英文标题】：sass-loader with Webpack doesn't generate CSS

【发布时间】：2018-02-07 00:46:25

【问题描述】：

如何使用 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 文件

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

【问题讨论】：

我不是 100% 确定，但我认为您可能通过内联链接加载程序来绕过 ExtractTextPlugin。您可以尝试只要求您的 scss 文件而前面没有任何加载程序吗？例如。 require('./scss/payload.scss'); 看看是否可行？

我确实尝试过。在那种情况下，babel 尝试解析 require，我最终在 ./app/scss/payload.scss 模块解析失败：/home/ekam/devel/payloadApp/app/scss/payload.scss Unexpected token (6 :5) 你可能需要一个合适的加载器来处理这个文件类型。 | * 其中大部分是从 Base 继承的，但我想更改一些。 | */ |身体 |颜色：#333； | @ ./app/index.js 36:0-30 @multi react-hot-loader/patch webpack-hot-middleware/client?path=localhost:3000/__whatwebpack/hot/only-dev-server ./app/index .js

【参考方案1】：

问题出在

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

在加载器中删除此行生成 css 文件。