Question

我第一次尝试使用webpack，我想使用SASS而不是CSS，但是我无法解决sass-loader的问题。

我的webpack.common.js：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/main.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                use: ['style-loader', 'css-loader', 
                    { 
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('autoprefixer')()
                            ]
                        }
                    },
                    'sass-loader']
            },
            {
                test: /\.(jpg|jpeg|gif|png)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 102400,
                            name: '[name].[ext]',
                            outputPath: 'images'
                        }
                    }
                ]
            },
            {
                test: /\.(woff(2)?|ttf|eof|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    }
}

我已经使用npm安装了 sass-loader 和 node-sass 程序包，并且将 webpack.common.js 文件加载到了 webpack.dev.js 文件：

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'dist'),
        watchOptions: {
            ignored: /node_modules/
        }
    }
});

老实说，我认为问题不是由此文件引起的。要运行我的应用程序，我使用 npm run dev 。

好吧，有我的sass文件（在src / styles / styles.scss中）：

@import '~bootstrap/scss/bootstrap.scss';
@import '~@fortawesome/fontawesome-free/css/all.css';


body {
    background-color: #eee;
}

您知道如何解决此问题吗？我知道这个问题被问了很多次，我在发布之前在github和stackoverflow上进行了搜索，但是我没有成功使我的应用正常工作。

谢谢。

Webpack无法编译sass-模块解析失败：意外字符'@'（1：0）

0 个答案: