Webpack 不会从 styles.scss 创建 styles.css

Question

我是 webpack 的新手。请帮我。我做错了什么我不知道。它没有显示任何错误！！！这是我的 webpack.config.js 文件。它创建 bundle.js，但不会从 styles.scss 创建 styles.css。 预计 webpack 将在 static/css/ 中创建 style.css。文件夹结构为 -

 -package.json
    -webpack.config.js
    -static/
        css/
        js/
            src/main.js
        sass/style.scss

    module.exports = {
    entry: {
        app: path.resolve(__dirname, './static/js/src/main.js'),

    },
    output: {
        path: path.resolve(__dirname, './static/js/'),
        filename: 'bundle.js'
    },
    module: {
        rules: [

            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'es2015', 'react'],
                        plugins: [require('babel-plugin-transform-object-rest-spread')]
                    }
                }
            },


            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: ["css-loader", "sass-loader"],
                    fallback: "style-loader",
                    publicPath: path.resolve(__dirname, '/static/css')

                })
            }

        ]
    },

    plugins: [


        new ExtractTextPlugin({
            filename: 'styles.css',
            disable: false,
            allChunks: true
        }),

        //reduce react size
        new webpack.DefinePlugin({ 
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),

        new webpack.optimize.UglifyJsPlugin({
            compress: {
                screw_ie8: false,
                warnings: false
            }
        }),
        new webpack.optimize.AggressiveMergingPlugin()

    ]
};

这些是我的节点依赖-

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },

提前致谢。

Answer 1

一般来说，虽然 webpack 加载程序执行特定于资源的任务，但它的源代码需要定义依赖项。在源代码中任何需要 SCSS 样式的地方，都需要导入该 SCSS 文件。第一次听到可能听起来很奇怪，但这就是 webpack 的工作原理。

也就是说，我觉得配置不错。

如果一切顺利，Webpack 应该会处理依赖关系图中的 SCSS 依赖关系。

输出是否显示它处理 SCSS 源文件的任何迹象？

如果未创建输出 css 文件，则可能缺少的部分是源代码中缺少依赖项声明，即 require("./scss-file-here") 或 import "./scss-file-here"

来自 webpack 指南 here

This enables you to import './style.css' into the file that depends on that styling.

Webpack 不会从 styles.scss 创建 styles.css

Webpack does not create styles.css from styles.scss

webpack

webpack-2