javascript - webpack 打包css问题

问题描述

我在配置webpack的时候，关于css这块是这样设置的 loader: ’style-loader!css-loader?modules’

可以使不同模块之间的样式命名不会冲突，但是这样设置之后，我引入的外部css样式，就不被打包，不能显示了，请问是什么问题

问题解答

将css分为需要打包的和不需要打包的，一般需要打包的css源文件都是预处理文件，比如以.less，.scss，.styl结尾的文件等等，可以对这部分需要打包的文件进行webpack配置，而对.css后缀的文件不作css module处理。

示例：

{test: /.pcss$/,use: [ ’style-loader’, { loader: ’css-loader’, options: { camelCase: true, importLoaders: 1, localIdentName: ’[path][name]---[local]---[hash:base64:5]’, modules: true, }, }, { loader: ’postcss-loader’, options: { plugins: () => [require(’postcss-import’)({ path: path.join(baseDir, ’./src/style’),}),require(’postcss-cssnext’),require(’postcss-nested’),require(’postcss-functions’)({ functions: { // any funcs you wanna },}), ], }, },], }, {test: /.css$/,use: ExtractTextPlugin.extract({ fallback: ’style-loader’, use: [ ’css-loader’, ],}), },