使用 webpack 从 .sass 到 .css 文件

Question

所以我有 SASS 文件，我想使用 webpack 将其转换为 css，但我不希望在加载时在我的文档上添加一个看起来很丑的 <style></style> 标签，我不想要对我的每个反应组件执行require('style!sass!./file.sass')，但我希望将所有 sass 文件转换为一个名为 app.css 的文件，但我无法使其工作。请帮我做这件事。

• webpack 版本 2.2.1

我的 webpack.config.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
        __dirname + '/resources/assets/js/app.js',
        __dirname + '/resources/assets/sass/app.sass'
    ],

    output: {
        path: __dirname + '/public/js',
        filename: 'app.js'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },

            {
                test: /\.sass$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract([
                    'style-loader',
                    'sass-loader'
                ])
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin({
            filename: __dirname + '/public/css/app.css',
            allChunks: true
        })
    ]
}

当我运行webpack 时，使用该webpack.config.js 文件会给我以下错误。

C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Chunk.js:59
                throw new Error("Chunk.entry was removed. Use hasRuntime()");
                ^

Error: Chunk.entry was removed. Use hasRuntime()
    at Chunk.get entry [as entry] (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Chunk.js:59:9)
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\extract-text-webpack-plugin\index.js:201:13
    at Array.filter (native)
    at Compilation.<anonymous> (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\extract-text-webpack-plugin\index.js:200:37)
    at Compilation.applyPlugins0 (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\tapable\lib\Tapable.js:68:14)
    at Compilation.seal (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:558:8)
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compiler.js:474:16
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\tapable\lib\Tapable.js:225:11
    at _addModuleChain (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:472:11)
    at processModuleDependencies.err (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:443:13)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! 3-projectname@1.0.0 build: `node ./node_modules/webpack/bin/webpack.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 3-projectname@1.0.0 build script 'node ./node_modules/webpack/bin/webpack.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the 3-projectname package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node ./node_modules/webpack/bin/webpack.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 3-projectname
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 3-projectname
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\me\Documents\projects\web\experiments\3-projectname\npm-debug.log

我的 sass 文件

@import './partials/globals'

Answer 1

我同意@epiqueras，如果您使用的是webpack2，那么您还需要使用extract-text-webpack-plugin 的2.x 版，否则您的构建将失败。

所以在你的情况下，它会是这样的。

module.exports = {
entry: [
    __dirname + '/resources/assets/js/app.js',
    __dirname + '/resources/assets/sass/app.sass'
],

output: {
    path: __dirname + '/public/js',
    filename: 'app.js'
},

module: {
    rules: [ // from 'loaders' to 'rules'
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },

        {
            test: /\.sass$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: ['style-loader','sass-loader']
            })
        }
    ]
},

plugins: [
    new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be
]

}

Answer 2

从 webpack 2 开始，这是您配置插件的方式：

// In the loaders (now 'rules') array
{
  test: /\.sass$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract({
    fallbackLoader: "style-loader", // Will inject the style tag if plugin fails
    loader: "css-loader!sass-loader",
  }),
}

plugins: [
  new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true })
]

你也忘了在 sass 加载器之后使用 css 加载器。

确保您已安装提取文本插件 v2。 v1 不适用于 webpack 2。

您的 webpack 配置看起来像是为 webpack 1 制作的。 https://webpack.js.org/guides/migrating/