Webpack 4 Module parse failed: Unexpected character '@' (1:0)

后端 未结 3 720
北海茫月
北海茫月 2021-02-14 06:34

I get this error when i try to run npm run dev to compile my scss to css. I know that issue is related to @import

ERROR in ./src/scss/m

相关标签:
3条回答
  • 2021-02-14 06:41

    The issue is within your module.rule for handling SASS related files within your project. Within your rule you're only including the SASS files from within your <path>/src/sass/ directory to be compiled into CSS:

    {
       test: /\.scss$/,
       include: [
          path.resolve(__dirname, 'src', 'sass')
       ],
       use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
    }
    

    However, a quick scan of your directory structure shows that your index.js file is actually importing your main.scss file from within the src/scss/ directory:

    index.js:

    import "./scss/main.scss";.

    This is a problem because your SASS rule is only going to compile SASS related files to CSS from within the src/sass directory, but your SASS related files are actually located within your src/scss directory.

    Therefore, your SASS files are never actually compiled to CSS appropriately.

    To resolve this either remove the include part all together or change the include location to the correct path location of your SASS files:

    include: [ path.resolve(__dirname, 'src', 'scss') ],

    Another thing I would consider doing is adding the .scss extension to your imports within your main.scss file:

    @import "header.scss";

    or alternatively adding a resolve section within your webpack.config.js file so you can simplify your imports and still have webpack handle them appropriately. Something along the lines of:

    resolve: {
        extensions: ['.js', '.jsx', '.scss']
    }
    

    Hopefully that helps!

    0 讨论(0)
  • 2021-02-14 06:45

    I fixed these similar issue by following these link.

    I updated rule section of webpack.config.js as follows

    rules: [
        {
                test: /\.css$/,
                use : [
                    {
                            loader: 'style-loader',
                    },
                    {
                            loader: 'css-loader',
                            options: {
                                    sourceMap: true,
                            }
                    }
                ]
        }
    ]
    

    Then installed the dependencies as follows.

    using yarn

    yarn add style-loader --dev
    yarn add css-loader --dev
    

    using npm

    npm install style-loader --save-dev
    npm install css-loader --save-dev
    
    0 讨论(0)
  • 2021-02-14 06:58

    To solve this problem for Webpack 4, first install sass-loader, node-sass, style-loader, and css-loader via npm:

    npm install sass-loader node-sass style-loader css-loader --save-dev
    

    Then add this rules to the webpack.config.js:

    module.exports = {
      module: {
        rules: [
          // ...Other rules,
          {
            test: /\.s[ac]ss$/i,
            use: [
              // Creates `style` nodes from JS strings
              'style-loader',
              // Translates CSS into CommonJS
              'css-loader',
              // Compiles Sass to CSS
              'sass-loader',
            ],
          },
        ],
      },
    };
    

    Note: The order is important, e.g: Don't put css-loader before style-loader or you'll probably get weird erros!

    0 讨论(0)
提交回复
热议问题