使用Webpack将.sass文件转换为.css文件

Question

我有一些SASS文件，想要使用Webpack将其转换成CSS。但是当文档加载时，我不想添加丑陋的<style></style>标签，并且也不想在每个React组件中都使用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'

- aprilmintacpineda

---

在 package.json 中的 "scripts": { "build-css": "node-sass --include-path scss scss/main.scss public/css/main.css" } 是什么意思？ - Everettss

Answer 1

从webpack2开始，这是配置插件的方法：

// 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 loader之后，您还忘记了使用css loader。

确保您安装了Extract Text插件的v2版本。v1版本不支持webpack 2。

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

- user5183133

---

谢谢！我的问题在于我没有安装Extract Text插件的第二个版本。 - Jason Harris

在webpack 3中，fallbackLoader变成了fallback，而loader变成了use。 - diachedelic

Answer 2

我同意 @epiqueras 的观点，如果你正在使用 webpack2，那么你还需要使用 2.x 版本的 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: {
    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
]

}

- ickyrr