从.sass到.css文件与webpack

2024年1月10日 189次阅读

所以我有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.config.js文件在运行webpack时出现以下错误.

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'

最佳答案 从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 loader之后使用css loader.

确保安装了Extract Text插件的v2. v1不适用于webpack 2.

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

点赞