jsCssSyntaxError { name: 'CssSyntaxError', reason: 'Unknown word',

阅读更多

Webpack 编译vue项目的stylus样式的时候报错：

 

首先通过：

标签方式引入stylus报错如下：

jsCssSyntaxError {   name: 'CssSyntaxError',   reason: 'Unknown word',

 

后面通过script import './sprite.styl' 定位到错误的地方

 

sprite.styl)
Module build failed: Syntax Error 

(799:1) Unknown word

  797 |   height: 46px;
  798 | }
> 799 | .flag_niu#x27;ai {
      | ^
  800 |   background-image: url("./sprite.png");
  801 |   background-position: -300px -552px;

 

原因：含有特殊符号：'

原来是stylus里面通过sprite生成雪碧图有&符号导致报错，搜索并替换这个符号，重新编译即可，

 

其他Webpack配置解决其他方案：

rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: isProd
            }
          },
          'postcss-loader', 'stylus-loader'
        ]
      }
]

 

更多实例应用扫码体验：