javascript - webpack 打包css问题
问题描述
我在配置webpack的时候,关于css这块是这样设置的 loader: ’style-loader!css-loader?modules’
可以使不同模块之间的样式命名不会冲突,但是这样设置之后,我引入的外部css样式,就不被打包,不能显示了,请问是什么问题
问题解答
回答1:将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’, ],}), },
相关文章:
