Webpack 未加载 scss 文件 [英] Webpack not loading scss file

问题描述

我已经将我的项目升级到 webpack 3.现在我的 scss 文件没有被加载.早些时候它确实加载了，当我使用 webpack 1 时.但现在我正在关注文档并尝试了许多不同的东西.但仍然无法加载 SCSS 文件.任何建议我做错了什么或如何加载 scss 文件.style.scss 直接位于/src 下.

I have upgraded my project to webpack 3. Now my scss file is not getting loaded. Earlier it did load, when I used webpack 1. But now I am following the documentation and tried many different things. But still not able to load the SCSS file. Any suggestions what I am doing wrong or how to load the scss file. The style.scss is directly under /src.

以下是我的 webpack 配置和 package.json.

following is my webpack config and package.json.

var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
var APP_DIR = path.resolve(__dirname, './src');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './public/js'),
        filename: 'my-first-webpack.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'

                }

            },
            {
                test: /\.(png|svg|jpg|webp)$/,
                use: {
                    loader: 'file-loader',
                },
            }
        ]
    }
}

• Package.JSON

  • Package.JSON

    <代码>{"name": "basavasamiti",版本":0.1.0"，私人":真的，依赖关系":{"babel-core": "^6.25.0","babel-loader": "^7.1.1","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","css-loader": "^0.28.7","文件加载器": "^0.11.2","路径": "^0.12.7",反应":^ 15.6.1"，反应引导":^0.31.0"，"react-bootstrap-carousel": "^1.2.0","react-dom": "^15.6.1","react-router-bootstrap": "^0.24.2","react-router-dom": "^4.1.2",反应脚本":1.0.11"，"react-svg-loader": "^1.1.1","style-loader": "^0.18.2",svg-loader":0.0.2"},脚本":{开始":反应脚本开始"，"build": "react-scripts build","test": "反应脚本测试 --env=jsdom",弹出":反应脚本弹出"},开发依赖":{"node-sass": "^4.5.3","sass-loader": "^6.0.6","webpack": "^3.6.0"}}

    对 Webpack 配置进行更改后，现在看起来像这样，但是我收到一个错误，extract-text-webpack-plugin loader is used without相应的插件.不过我已经安装好了.我的 package.json 显示了这个插件的条目.不知道为什么这个错误.

    After making changes to Webpack config Now it looks like this, but I get an error extract-text-webpack-plugin loader is used without corresponding plugin. But I have it installed already. My package.json shows an entry for this plugin. Not sure why this error.

    `

    const webpack = require('webpack');
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const CopyAssets = require('copy-webpack-plugin');
    const WriteFiles = require('write-file-webpack-plugin');
    
    var isProd = process.env.NODE_ENV === 'production'; // true or false
    
    var prod = '../index.js';
    var dev = 'index.js';
    var outputFile = isProd ? prod : dev;
    
    module.exports = {
    
        entry: {
            app: path.resolve(__dirname, 'src/') + '/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'public/'),
            filename: 'js/index.js'
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        //resolve-url-loader may be chained before sass-loader if necessary
                        use: ['css-loader', 'sass-loader']
                    })
                },
                {
                    test: /\.js$/,
                    exclude: path.resolve(__dirname, 'node_modules'),
                    use: 'babel-loader'
                },
                {
                    test: /\.(pug|html)$/,
                    use: ['raw-loader', 'pug-html-loader']
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    use: 'file-loader'
                }
    
            ]
        },
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            compress: true,
            port: 8001,
            stats: 'errors-only',
            open: true,
            host: '0.0.0.0',
            disableHostCheck: true
        },
        plugins: [
            new WriteFiles(),
            new HtmlWebpackPlugin(
                {
                    filename: outputFile,
                    template: 'src/index.js',
                    inject: true
                }
            ),
            new CopyAssets([
                {
                    from: 'src/images',
                    to: 'img'
                }
            ]),
    
            new ExtractTextPlugin(
                {
                    filename: '[name]-[chunkhash].css',
                    disable: false,
                    allChunks: true
                }
            )
        ]
    
    };
    

    推荐答案

    首先，升级时你需要确保你也升级了所有的加载器.我们最终得到了这听起来与您的情况相似.我也很难找到答案.

    First of all, when upgrading you need to make sure you upgrade ALL the loaders too. We ended up with this which sounds similar to your situation. I had trouble finding the answer too.

    module.exports = {
      module: {
        rules: [
          {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: ['css-loader']
            })
          },
          {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: ['css-loader', 'url-loader', 'sass-loader']
            })
          }
        ]
      }
    }
    

    我们发现此链接非常有用:

    We found this link very helpful:

    https://github.com/webpack-contrib/extract-text-webpack-plugin

    这篇关于Webpack 未加载 scss 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！