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’, ],}), },