1

我的 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"
     })
 }
4

3 回答 3

1

我已经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，等等。fallbackLoader当没有可以提取的 CSS 时使用该选项。

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

编辑

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

于 2017-01-25T08:15:58.907 回答
1

不确定这是否会有所帮助，但对于从 Browserify 迁移过来的我来说，我对同样的问题感到有些悲伤。

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

应用程序.js

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

或者

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

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

于 2017-10-03T23:18:32.823 回答
1

你必须安装sass-loader

npm install --save-dev sass-loader

请注意，使用 Webpack2 您应该/必须更新配置文件：

这是我的工作配置的摘录：

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,
于 2017-01-24T19:16:52.200 回答