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'
        ]
      }
]

 


更多实例应用扫码体验:

jsCssSyntaxError { name: 'CssSyntaxError', reason: 'Unknown word',_第1张图片

你可能感兴趣的:(乔乐共享,纵观千象,每天进步一点点,学习永无止境,Vue)