js import bootstrap css error

First of all, I am sorry that my English may be very poor, so I use google translate to describe my problem!
Do you want to request a feature or report a bug?
bug

What is the current behavior?
When I import bootstrap css(node_modules/↓) in xxx,js file, webpack css-loader? report error like this
“Possibly missing opening ‘{‘ “.
If the current behavior is a bug, please provide the steps to reproduce.
After my analysis, I suspect that the cause of the problem is due to the csshack in the file.(bootstrap.css v3.3.7 line:3627 ‘border-bottom: 4px solid \9’) ,delete ‘\9’ or add new line anyone css property key and value, It’s work good;

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
windows 10 x64, node.js x64 6.10 webpack 2.3

Looking forward to your reply, thanks!

Author: Fantashit

1 thought on “js import bootstrap css error

  1. Please add backticks “`code here…“` around the code and sanitize unrelevant parts of the config (other loaders) 😛

    {
      test: /.(css|less|scss|sass)$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader', 'less-loader', 'sass-loader'], // This doesn't work
        publicPath: ${publicPath}/
      })
    }

    Your will need to split it up, you can’t pass .less to sass-loader (node-sass) first or the other way around. CSS maybe accepted by the LESS/SCSS Parser you need to look that up, but LESS in SASS or otherwise will break the build sooner or later

    webpack.js

    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    // Instances 
    const extractCSS = new ExtractTextPlugin('vendor.css')
    const extractSCSS = new ExtractTextPlugin('styles_1.css')
    const extractLESS = new ExtractTextPlugin('styles_2.css')
    
    {
      test: /\.css$/,
      use: extractCSS.extract({
        fallback: 'style-loader',
        use: [ 'css-loader', 'postcss-loader' ]
        publicPath: ${publicPath}
      })
    },
    {
      test: /\.(sass|scss)$/,
      use: extractSCSS.extract({
        fallback: 'style-loader',
        use: [ 'css-loader', 'postcss-loader', 'sass-loader' ]
        publicPath: ${publicPath}
      })
    },
    {
      test: /\.less$/,
      use: extractLESS.extract({
        fallback: 'style-loader',
        use: [ 'css-loader', 'postcss-loader', 'less-loader' ]
        publicPath: ${publicPath}
      })
    }

    Both LESS and SASS in one code base is not a good idea 😛

Comments are closed.