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"

来自网络包指南here

这使您可以import './style.css'进入依赖的文件造型。

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

1 个答案: