Question

应用程序构建成功。但是当我在浏览器中加载它时，它会产生错误＆＃39;意外的令牌，预期;＆＃39;在第一个{css文件中的字符标记处。我相信我遵循了文档，但这个错误不会消失。知道什么可能导致这个错误吗？

webpack.config.js

module.exports = {
 ...
 module: {
    rules: [{
        test: /\.jsx?$/,
        use: 'eslint-loader',
        exclude: /node_modules/,
        include: Dir.src
      }, {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }, {
        test: /\.json$/, 
        use: 'json-loader'
      }, {
        test: /\.woff2(\?[a-z0-9]+)?$/, 
        use: [{
            loader: 'url-loader',
            query: {
                limit: 10000,
                mimetype: 'application/font-woff2'
            }
        }]
      }, {
        test: /\.(eot|gif|jpe?g|mp+|png|svg|tff|wav|woff*)$/,
        use: [{
            loader: 'file-loader',
            query: {
                limit: 10000
            }
        }]
      }, {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: 'file-loader'
      }, {
        test: /favicon\.ico$/,
        use: [{
            loader: 'url-loader',
            query: { 
              limit: 1,
              name: '[name].[ext]',
            }
        }]
      }, {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }, {
        test: /\.s[a,c]ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'] 
      }
    ]
  },
  ...
}

index.jsx

import React from 'react';
import './index.css';
...

index.css

div {   text-overflow: ellipsis;    }
button {        
    border-radius: 0 !important;
    cursor: pointer;
    padding: 0.6vh 1.2vw;       
}
button, .btn, .form-control {   border-width: 0.1vh 0.05vw;     }
button, .btn, .btn > *, [class^='btn-'], [class^='btn'] > * {   font-size: 1.8vmin;     }
.btn-group-sm > .btn, .btn-sm {
    font-size: 77%;
    line-height: 1.5;
}

产地：

    + 1446 hidden modules
webpack: bundle is now VALID.
{ SyntaxError: C:/simproduct/component/index.css: Unexpected token, expected ; (1:4)
> 1 | div {     text-overflow: ellipsis;        }
    |     ^
  2 | button {
  3 |   border-radius: 0 !important;
  4 |   cursor: pointer;
 at Parser.pp$5.raise (C:\simproduct\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp.unexpected (C:\simproduct\node_modules\babylon\lib\index.js:1761:8)
    at Parser.pp.semicolon (C:\simproduct\node_modules\babylon\lib\index.js:1742:38)
    at Parser.pp$1.parseExpressionStatement (C:\simproduct\node_modules\babylon\lib\index.js:2236:8)

Answer 1

尝试以下配置进行测试：/.css$/。确保您的配置中有postcss-loader。

test: /\.css$/,
            use:  ['style-loader', {loader: 'css-loader', options: { importLoaders: 1 }},
                'postcss-loader'
              ]
          }

你需要有postcss.config.js文件;你的package.json位置相同。添加以下内容;或相应的变化

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions', '>5%']
    }
  }
};

修改

尝试将以下查询添加到jsx加载器，如下所示：

{ test: /\.jsx?$/, exclude: /node_modules/, use: [{ loader: 'babel-loader', query: { presets: ['react', 'es2015','stage-1'] } }

获取：意外的令牌{预期;在解析纯CSS文件时

1 个答案: