问答详情
源自:4-4 处理项目中的 css

css-loader 的参数为什么加上报错

为什么我的在css-loader后面加上参数就会报错呢 {test: /\.css$/,use: [ 'style-loader','css-loader?importLoaders=1',          {            loader: 'postcss-loader',            options: {              plugins: function () {                return [                  require('autoprefixer')                ]; } }} ] }

提问者:_DefTnT 2017-03-20 11:00

个回答

  • 最初的梦想gawin
    2017-04-06 18:07:28

    rules: [
       {
           test: /\.js$/,
           include: path.resolve(__dirname,'src'),
           exclude: path.resolve(__dirname,'node_modules'),
           loader: "babel-loader"
       },
       {
           test: /\.css$/,
           use: [
               'style-loader', {
                   loader: 'css-loader',
                   options: {
                       // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
                   }
               }, {
                   loader: 'postcss-loader',
                   // 在这里进行配置,也可以在postcss.config.js中进行配置,详情参考https://github.com/postcss/postcss-loader
                   options: {
                       plugins: function() {
                           return [
                               require('precss'),
                               require('autoprefixer')
                           ];
                       }
                   }
               }
           ]
       }
       ,{
           test: /\.less$/,
           use: [
               'style-loader', 'css-loader', {
                   loader: "postcss-loader",
                   options: {
                       plugins: function() {
                           return [
                               require('autoprefixer')
                           ];
                       }
                   }
               }, 'less-loader'
           ]
       }
    ]

  • 最初的梦想gawin
    2017-04-06 17:46:59

    {
       test: /\.css$/,
       use: [
           {loader: 'style-loader'},
           {loader: 'css-loader'},
           {
               loader: 'postcss-loader',
               options: {
                   plugins: function () {
                       return [
                           require('precss'),
                           require('autoprefixer')
                       ];
                   }
               }
           }
       ]
    }


    WEBPCAK2 不支持 直接在后面带参数吧

  • 兴xing
    2017-03-20 11:53:50

    百度了说是不能直接定义自定义配置,在全局的plugins底下写一个函数就可以了:

    new webpack.LoaderOptionsPlugin({

          options: {

            postcss: function() {

              return [

                require('autoprefixer')({

                  broswers: ['last 5 versions']

                })

              ]

            }

          }

        })

    注意引入webpack