mini-css-extract-plugin: CssSyntaxError (1:1) Unknown word > 1 | // extracted by mini-css-extract-plugin

@fangshuaituo you have multiple loader for css please check your configuration, see on error, css-loader again execute on extracted file

Looks baseWebpackConfig already contains rules for css

I met the same question, and I use this way to resolve the problem: In order to use MiniCssExtractPlugin, and always keep the mode of development, I refer the sass-loader , not MiniCssExtractPlugin

look at my config:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],

module: {
        rules: [{
            test: /\.scss$/,
            use: [
                // only use the mode of development
               MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        }]
    }

My problem was that I had file-loader at the end of my RuleSet.

Hi, I’m having this issue too, even without using the MiniCssExtractPlugin. Maybe it’s related to Elixir (I’m using that in this project)?

webpack.config.js

====================================================

const path = require(‘path’); const glob = require(‘glob’); const HardSourceWebpackPlugin = require(‘hard-source-webpack-plugin’); //const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’); const TerserPlugin = require(‘terser-webpack-plugin’); //const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’); const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

module.exports = (env, options) => { const devMode = options.mode !== ‘production’;

return { plugins: [ //new MiniCssExtractPlugin({ filename: ‘…/css/app.css’ }), new CopyWebpackPlugin([{ from: ‘assets/static/’, to: ‘…/’ }]) ] .concat(devMode ? [new HardSourceWebpackPlugin()] : []), optimization: { minimizer: [ new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }), //new OptimizeCSSAssetsPlugin({}) ] }, entry: { //‘app’: glob.sync(‘./vendor/**/*.js’).concat([‘./js/app.js’]) app: ‘./assets/js/app.tsx’ }, output: { filename: ‘app.js’, path: path.resolve(__dirname, ‘priv/static/js’), publicPath: ‘/js/’ }, devtool: devMode ? ‘eval-cheap-module-source-map’ : undefined, module: { rules: [ { test: /.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use: { loader: ‘babel-loader’ } }, { test: /.css$/, use: [ “css-loader”, “style-loader” ] } ] }, resolve: { // Add ‘.ts’ and ‘.tsx’ as resolvable extensions.
extensions: [‘.ts’, ‘.tsx’, ‘.js’, ‘.jsx’, ‘.json’] }

} };

====================================================

app.tsx

====================================================

// We need to import the CSS so that webpack will load it. // The MiniCssExtractPlugin is used to separate it out into // its own CSS file. //import “…/css/app.scss”

import “…/css/phoenix.css”

// webpack automatically bundles all modules in your // entry points. Those entry points can be configured // in “webpack.config.js”. // // Import deps with the dep name or local files with a relative path, for example: // // import {Socket} from “phoenix” // import socket from “./socket” // import “phoenix_html”

import * as React from ‘react’ import * as ReactDOM from ‘react-dom’ import Root from ‘./Root’

// This code starts up the React app when it runs in a browser. It sets up the routing // configuration and injects the app into a DOM element. ReactDOM.render(<Root />, document.getElementById(‘react-app’))

====================================================

The specific error message I’m getting is:

====================================================

XXXXXXXX:phoenix_react_playground XXXXXX $ iex -S mix phx.server Erlang/OTP 23 [erts-11.0.2] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe] [dtrace]

[info] Running PhoenixReactPlaygroundWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http) [info] Access PhoenixReactPlaygroundWeb.Endpoint at http://localhost:4000 Interactive Elixir (1.10.4) - press Ctrl+C to exit (type h() ENTER for help) iex(1)> webpack is watching the files…

[hardsource:c5e8e0dd] Using 22 MB of disk space. [hardsource:c5e8e0dd] Writing new cache c5e8e0dd… [hardsource:c5e8e0dd] Tracking node dependencies with: package-lock.json, yarn.lock. Hash: 3e7fe0019f22e1eb2892 Version: webpack 4.41.5 Time: 3247ms Built at: 08/01/2020 9:11:27 PM Asset Size Chunks Chunk Names …/favicon.ico 1.23 KiB [emitted]
…/images/phoenix.png 13.6 KiB [emitted]
…/robots.txt 202 bytes [emitted]
app.js 2.75 MiB app [emitted] app Entrypoint app = app.js [./assets/css/phoenix.css] 670 bytes {app} [built] [failed] [1 error] [./assets/js/Root.tsx] 3.76 KiB {app} [built] [./assets/js/app.tsx] 865 bytes {app} [built] [./assets/js/pages/index.tsx] 233 bytes {app} [built] [./deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {app} [built] + 31 hidden modules

ERROR in ./assets/css/phoenix.css Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError

(1:1) Unknown word

1 | var api = require(“!../…/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js”); | ^ 2 | var content = require(“!!./phoenix.css”); 3 |

@ ./assets/js/app.tsx 5:0-28

I have a similar problem and have been hammering google for hours on this… please assist…thanks

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require('path')
const extractedCSS = new MiniCssExtractPlugin({
    filename: "[name].bundle.css"
});


module.exports = async ({ config, mode }) => ({
    ...config,
    plugins: [
         extractedCSS
    ],
    module: {
        ...config.module,
        rules: [
            ...config.module.rules,
            {
                test    : /\.(js|jsx)$/,
                exclude : /node_modules/,
                use     : 'babel-loader',
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.(eot|otf|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            context: '/', // check if '/' => './'
                            name: 'fonts/[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif|ico)$/,
                oneOf: [
                    {test: /flags\/\dx\d\//, use: 'file-loader?name=ext/flags/[name].[ext]'},
                    {test: /\/amcharts\//,   use: 'file-loader?name=ext/amcharts/[name].[ext]'},
                    {test: /.*/,             use: 'file-loader?name=images/[name].[ext]'}
                ]
            },
            {
                test: /\.(mobileconfig)$/,
                use: 'file-loader?name=files/[name].[ext]'
            },
            {
                test: /datatables\.net.*/,
                use: 'imports-loader?define=>false'
            }
        ]
    }
})