Fatal编程技术网
  • compilation/
  • Compilation 网页包SCS和自动刷新器不能一起工作

Compilation 网页包SCS和自动刷新器不能一起工作

compilation sass webpack

Compilation 网页包SCS和自动刷新器不能一起工作,compilation,sass,webpack,autoprefixer,Compilation,Sass,Webpack,Autoprefixer,由于有以下用于资产编译的网页包配置，我无法使autoprefixer正常工作。提取的css没有得到所需的前缀 var webpack = require('webpack'), precss = require('precss'), autoprefixer = require('autoprefixer'), ExtractTextPlugin = require('extract-text-webpack-plugin'), path = requ

由于有以下用于资产编译的网页包配置，我无法使autoprefixer正常工作。提取的css没有得到所需的前缀

var webpack = require('webpack'),
    precss       = require('precss'),
    autoprefixer = require('autoprefixer'),
    ExtractTextPlugin = require('extract-text-webpack-plugin'),
    path = require('path');



const sassLoaders = [
    'css-loader!autoprefixer-loader?browsers=last 2 version',
    'postcss-loader',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]

const config = {
    entry: {
        //nsb: ['./js/nsb']
        dashboard: ['./js/dashboard']
    },
    module: {
        loaders: [
            {
                test: /\.sass$/,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            },
            {
                test:   /\.docs\.css$/,
                loader: "style-loader!css-loader!postcss-loader?pack=cleaner"
            },
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            },

            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
        ]
    },
    postcss: function () {
        return {
            defaults: [precss, autoprefixer],
            cleaner:  [autoprefixer({ browsers: [] })]
        };
    },
    output: {
        filename: '[name].js',
        path: path.join(__dirname, './build'),
        publicPath: '/bundles/dashboard/build/'
    },
    amd: {jQuery: true},
    plugins: [
        new ExtractTextPlugin('[name].css'),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
    ],
    /* postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    */
    resolve: {
        alias: {
            jquery: 'node_modules/jquery/dist/jquery.js',
            magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
        },

        modulesDirectories: ['./js', 'node_modules'],
        extensions: ['', '.js', '.sass'],
        root: [path.join(__dirname, './')]
    }
}

module.exports = config;

css加载器
自带了自己的autoprefixer配置，您需要禁用它才能使配置正常工作。因此，无论您在哪里使用
css加载器
，都需要执行add以禁用
css加载器
autoprefixer

css加载器？-autoprefixer

更多信息可以找到&

因此，您的配置将如下所示

var webpack = require('webpack'),
  precss       = require('precss'),
  autoprefixer = require('autoprefixer'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path');



const sassLoaders = [
  'css-loader?-autoprefixer!autoprefixer-loader?browsers=last 2 version',
  'postcss-loader',
  'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]

const config = {
  entry: {
    //nsb: ['./js/nsb']
    dashboard: ['./js/dashboard']
  },
  module: {
    loaders: [
      {
        test: /\.sass$/,
        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      },
      {
        test:   /\.docs\.css$/,
        loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
      },

      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  },
  postcss: function () {
    return {
      defaults: [precss, autoprefixer],
      cleaner:  [autoprefixer({ browsers: [] })]
    };
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './build'),
    publicPath: '/bundles/dashboard/build/'
  },
  amd: {jQuery: true},
  plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
  ],
  /* postcss: [
    autoprefixer({
    browsers: ['last 2 versions']
    })
    ],
    */
  resolve: {
    alias: {
      jquery: 'node_modules/jquery/dist/jquery.js',
      magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
    },

    modulesDirectories: ['./js', 'node_modules'],
    extensions: ['', '.js', '.sass'],
    root: [path.join(__dirname, './')]
  }
}

module.exports = config;
此外，我认为您可以删除
sassLoaders
中的
autoprefixer加载程序
，因为您正在将postss与autoprefixer一起使用。

css加载程序附带了自己的autoprefixer配置，您需要禁用它才能使配置正常工作。因此，无论您在哪里使用
css加载器
，都需要执行add以禁用
css加载器
autoprefixer

css加载器？-autoprefixer

更多信息可以找到&

因此，您的配置将如下所示

var webpack = require('webpack'),
  precss       = require('precss'),
  autoprefixer = require('autoprefixer'),
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  path = require('path');



const sassLoaders = [
  'css-loader?-autoprefixer!autoprefixer-loader?browsers=last 2 version',
  'postcss-loader',
  'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]

const config = {
  entry: {
    //nsb: ['./js/nsb']
    dashboard: ['./js/dashboard']
  },
  module: {
    loaders: [
      {
        test: /\.sass$/,
        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      },
      {
        test:   /\.docs\.css$/,
        loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
      },
      {
        test:   /\.css$/,
        loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
      },

      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  },
  postcss: function () {
    return {
      defaults: [precss, autoprefixer],
      cleaner:  [autoprefixer({ browsers: [] })]
    };
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, './build'),
    publicPath: '/bundles/dashboard/build/'
  },
  amd: {jQuery: true},
  plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
  ],
  /* postcss: [
    autoprefixer({
    browsers: ['last 2 versions']
    })
    ],
    */
  resolve: {
    alias: {
      jquery: 'node_modules/jquery/dist/jquery.js',
      magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
    },

    modulesDirectories: ['./js', 'node_modules'],
    extensions: ['', '.js', '.sass'],
    root: [path.join(__dirname, './')]
  }
}

module.exports = config;
另外，我认为您可以删除
sassloader中的
autoprefixer加载程序
，因为您将postsss与autoprefixer一起使用。
您可以尝试以下代码，注意css加载程序和postsss加载程序之间添加了“-autoprefixer”


var webpack = require('webpack'),
precss       = require('precss'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path');
const sassLoaders = [
'css-loader!autoprefixer-loader?browsers=last 2 version',
'postcss-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, 
'.')
]

const config = {
entry: {
    //nsb: ['./js/nsb']
    dashboard: ['./js/dashboard']
},
module: {
    loaders: [
        {
            test: /\.sass$/,
            loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
        },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('css!sass')
        },
        {
            test:   /\.docs\.css$/,
            loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
        },
        {
            test:   /\.css$/,
            loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
        },

        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
},
postcss: function () {
    return {
        defaults: [precss, autoprefixer],
        cleaner:  [autoprefixer({ browsers: [] })]
    };
},
output: {
    filename: '[name].js',
    path: path.join(__dirname, './build'),
    publicPath: '/bundles/dashboard/build/'
},
amd: {jQuery: true},
plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
],
/* postcss: [
    autoprefixer({
        browsers: ['last 2 versions']
    })
],
*/
resolve: {
    alias: {
        jquery: 'node_modules/jquery/dist/jquery.js',
        magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
    },

    modulesDirectories: ['./js', 'node_modules'],
    extensions: ['', '.js', '.sass'],
    root: [path.join(__dirname, './')]
}
}

module.exports = config;


还有一个注意事项：在我的项目的根目录中，我还有一个postsss.config.js，其中包含以下内容：


module.exports = {
parser: 'postcss-scss',
plugins: [
    require('autoprefixer'),
]
}



您可以尝试以下代码，注意在css加载器和POSTSS加载器之间添加了“-autoprefixer”


var webpack = require('webpack'),
precss       = require('precss'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path');
const sassLoaders = [
'css-loader!autoprefixer-loader?browsers=last 2 version',
'postcss-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, 
'.')
]

const config = {
entry: {
    //nsb: ['./js/nsb']
    dashboard: ['./js/dashboard']
},
module: {
    loaders: [
        {
            test: /\.sass$/,
            loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
        },
        {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract('css!sass')
        },
        {
            test:   /\.docs\.css$/,
            loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
        },
        {
            test:   /\.css$/,
            loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
        },

        { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
        { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
},
postcss: function () {
    return {
        defaults: [precss, autoprefixer],
        cleaner:  [autoprefixer({ browsers: [] })]
    };
},
output: {
    filename: '[name].js',
    path: path.join(__dirname, './build'),
    publicPath: '/bundles/dashboard/build/'
},
amd: {jQuery: true},
plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
],
/* postcss: [
    autoprefixer({
        browsers: ['last 2 versions']
    })
],
*/
resolve: {
    alias: {
        jquery: 'node_modules/jquery/dist/jquery.js',
        magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
    },

    modulesDirectories: ['./js', 'node_modules'],
    extensions: ['', '.js', '.sass'],
    root: [path.join(__dirname, './')]
}
}

module.exports = config;


还有一个注意事项：在我的项目的根目录中，我还有一个postsss.config.js，其中包含以下内容：


module.exports = {
parser: 'postcss-scss',
plugins: [
    require('autoprefixer'),
]
}



谢谢你的回答，我刚刚试过了，但autoprefixer仍然不工作，只是检查编译的，例如
display:flex保持不变您是否在某个地方有此代码以便我可以查看它？顺便说一句，您在
sassLoaders
数组中的
autoprefixer
加载程序中的浏览器设置缺少一个“s”，它是
last 2 versions
不是
last 2 version
进行更正仍然不起作用。我只是想问你自己试过了吗？也许在你的情况下是有效的，我错过了一些我无法尝试的东西，如果我不知道你的代码/文件夹结构是什么样子的话。因此，如果你能做到这一点，我可以尝试并测试它。谢谢你的回答，我刚刚尝试了建议，但autoprefixer仍然不工作，只需检查编译的，例如
display:flex保持不变您是否在某个地方有此代码以便我可以查看它？顺便说一句，您在
sassLoaders
数组中的
autoprefixer
加载程序中的浏览器设置缺少一个“s”，它是
last 2 versions
不是
last 2 version
进行更正仍然不起作用。我只是想问你自己试过了吗？也许在你的情况下是有效的，我错过了一些我无法尝试的东西，如果我不知道你的代码/文件夹结构是什么样子的话。所以，如果你能做到这一点，我可以试着测试它。看到这个答案可能会有帮助…看到这个答案可能会有帮助。。。