Question

我的webpack.config.js和package.json分别有以下配置：

var extractSCSS = new ExtractTextPlugin({filename: '[name].css', disable: false, allChunks: true});


module: {
    loaders: [
        {
            test: /\.jsx?$/,
            include: SRC_DIR,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ["react", "es2015", "stage-2"]
            }
        },
        {
            test: /\.scss$/i,
            include: SRC_DIR,
            exclude: /(node_modules)/,
            loader: extractSCSS.extract(['css','sass'])
        }
    ]
},
plugins: [
    extractSCSS
]

和

"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta",
"style-loader": "^0.13.1",
"webpack": "^2.2.0",

但我无法生成css文件。我在这里缺少什么吗？

修改我更新了以下文件：

    "css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",

和

{
     test: /\.css$/,
     exclude: /(node_modules)/,
     loader: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader",
        publicPath: "/dist"
     })
 }

Answer 1

您必须安装sass-loader

npm install --save-dev sass-loader

请注意，对于Webpack2，您/我必须更新配置文件：

在引用加载器（Automatic -loader）
module.loaders现在module.rules（webpack 2 migration guide）
chaining loaders仅支持使用旧版选项module.loaders

rule.use

指定要使用的加载器。（rule.use）

以下是我的工作配置的摘录：

const extractCss = new ExtractTextPlugin('app.bundle.css');

添加此规则：

{
    test: /\.scss$/,
    loader: extractCss.extract([
        { loader: 'css-loader', query: { sourceMaps: true }},
        { loader: 'sass-loader', query: { sourceMaps: true }}
    ])
},

和插件：

plugins: [
    extractCss,

Answer 2

我已设置ExtractTextPlugin并且它可以正常工作，但它看起来与您拥有的配置完全不同。这是我的配置

module: {
    rules: [
        ...
        {
            loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: [
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }),
            test: /\.s(a|c)ss$/
        }
        ...
},
plugins: [
    ...
    new ExtractTextPlugin({
        allChunks: true,
        filename: "style.[contenthash].css"
    })
    ...
]

它是如何工作的，装载机从后面调到前面。首先是sass-loader，然后是postcss-loader等。当没有可以提取的CSS时，会使用fallbackLoader选项。

最后但并非最不重要的是，我想补充说我在开发中不使用ExtractTextPlugin，因为它可能导致更长的构建时间。

修改

我忘了在配置中包含插件部分。只是为了澄清，这些点意味着它是我配置的一部分。提供与该问题相关的所有内容。

Answer 3

不确定这是否会有所帮助，但对于我从Browserify转移过来，我对同样的问题感到非常悲痛。

我没有意识到为了让ExtractTextPlugin产生任何css，我必须将scss包含在javascript 的某个地方（即使它已经提取到app.bundle .css或类似的）否则它会默默地产生无输出。

的application.js

require('../scss/container.scss')

或

import css from '../scss/container.scss'

将导致在开发中的标头中注入<style>标记，并在生产中生成提取的app.bundle.css文件。

无法使用ExtractTextPlugin webpack从scss中提取CSS

3 个答案: