排除webpack中的一些css文件 [英] Exclude some css files in webpack
问题描述
我在使用 webpack 时遇到问题.我的项目具有以下结构.
文件夹结构:
srcjsapp.js//用于导入 app.scss 文件vendor.js//用于导入 vendor.scss 文件scssapp.scss//我们的自定义样式vendor.scss//需要 node_modules 中的所有供应商样式包.jsonpostcss.config.jswebpack.config.js在 scss 文件夹内有 2 个文件 app.scss &vendor.scss.app.scss 文件包含我们所有的自定义样式，vendor.scss 文件包含所有供应商样式，例如引导库样式.
webpack 命令后:
npm run devWebpack 通过 JavaScript 文件导入这些 scss 文件并通过 postcss-loader 添加供应商前缀并输出一个 dist文件夹.
但我不想在 vendor.scss 文件上添加供应商前缀，因为供应商库已经有供应商前缀.那么有没有办法从 postcss-loader 中排除 vendor.scss 文件.
完整代码:
src/js/app.js:
import '../scss/app.scss'src/js/vendor.js:
import '../scss/vendor.scss'src/scss/app.scss:
//我们的自定义样式.应用程序 {显示:弹性；}src/scss/vendor.scss:
//供应商样式.容器 {显示:弹性；}@import '~bootstrap/scss/bootstrap';package.json:
<代码>{"name": "测试","版本": "1.0.0",描述": ""，私人":真的，脚本":{"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development --progress true --colors"},作者": ""，"许可证": "麻省理工学院",依赖关系":{引导程序":^4.2.1"},开发依赖":{"@babel/core": "^7.2.2","@babel/preset-env": "^7.3.1","autoprefixer": "^9.4.6","babel-loader": "^8.0.5","css-loader": "^2.1.0","filemanager-webpack-plugin": "^2.0.5","mini-css-extract-plugin": "^0.5.0","node-sass": "^4.11.0","postcss-loader": "^3.0.0","sass-loader": "^7.1.0","webpack": "^4.29.0","webpack-cli": "^3.2.1"}}postcss.config.js:
module.exports={插件: [要求('自动前缀')({浏览器":['> = 1%','最后一个主要版本'，'没死'，'铬 >= 45','火狐 >= 38','边＞= 12','资源管理器 >= 10','iOS >= 9','Safari >= 9','安卓 >= 4.4','歌剧 >= 30'],级联:真})]};webpack.config.js:
const path = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const FileManagerPlugin = require('filemanager-webpack-plugin');module.exports = function() {返回 ({入口: {'供应商':'./src/js/vendor.js','app': './src/js/app.js',},输出: {路径:path.resolve(__dirname, 'dist'),文件名:'js/[名称].[chunkhash].js'},模块: {规则:[{测试:/\.js$/,排除:/(节点模块)/，用: {loader: 'babel-loader',选项: {预设:['@babel/preset-env']}}},{测试:/\.(sa|sc|c)ss$/,用: [{加载器:MiniCssExtractPlugin.loader，选项: {公共路径:'../'}}, {加载器:'css-加载器'，},//将 CSS 翻译成 CommonJS{loader: 'postcss-loader',},//在构建 css 文件中添加供应商前缀{loader: 'sass-loader',}//将 Sass 编译成 CSS]},]},插件: [新的 MiniCssExtractPlugin({文件名:'css/[名称].[contenthash].css'}),//构建前新的文件管理器插件({开始:{删除: ['区',],}}),]});};Zip 文件.
所以你希望供应商前缀不要添加到 Webpack 生成的 vendor.css 文件中.
记住 Webpack 以相反的顺序解析加载器数组.您可以使用正则表达式在 postcss-loader 的对象上添加 exclude 属性.
webpack.config.js:
const path = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const FileManagerPlugin = require('filemanager-webpack-plugin');module.exports = function() {返回 ({入口: {'供应商':'./src/js/vendor.js','app': './src/js/app.js',},输出: {路径:path.resolve(__dirname, 'dist'),文件名:'js/[名称].[chunkhash].js'},模块: {规则:[{测试:/\.js$/,排除:/(节点模块)/，用: {loader: 'babel-loader',选项: {预设:['@babel/preset-env']}}},{测试:/\.s(c|a)ss$/,用: {加载器:MiniCssExtractPlugin.loader，选项: {公共路径:'../'}},//取scss文件，拆分成单独的css文件},{测试:/\.s(c|a)ss$/,用: {加载器:'css-加载器'，},//像import/require()一样解释scss@import和url()},{测试:/\.s(c|a)ss$/,排除:[/供应商/]，用: {loader: 'postcss-loader',},},//PostCSS 把你的 SCSS 文件变成一个 JS 对象 &将该对象转换回 SCSS 文件{测试:/\.s(c|a)ss$/,用: {loader: 'sass-loader',},//通过sass-loader查找scss文件，将scss编译成css代码},]},插件: [新的 MiniCssExtractPlugin({文件名:'css/[名称].[contenthash].css'}),//构建前新的文件管理器插件({开始:{删除: ['区',],}}),]});};I'm facing a problem with webpack. My project has the following structure.
Folder structure:
src
js
app.js // For importing app.scss file
vendor.js // For importing vendor.scss file
scss
app.scss // Our custom styles
vendor.scss // Require all vendor styles from node_modules
package.json
postcss.config.js
webpack.config.js
Inside scss folder there are 2 files app.scss & vendor.scss. app.scss file contains all our custom styles, vendor.scss file contains all vendor styles such as bootstrap library styles.
After webpack command:
npm run dev
Webpack import these scss files through JavaScript files and add vendor prefixes via postcss-loader and output on a dist
folder.
But I don't want to add vendor prefixes on vendor.scss file because the vendor library already has vendor prefixes. So is there a way to exclude vendor.scss file from postcss-loader.
Full Code:
src/js/app.js:
import '../scss/app.scss'
src/js/vendor.js:
import '../scss/vendor.scss'
src/scss/app.scss:
// Our custom styles
.app {
display: flex;
}
src/scss/vendor.scss:
// Vendor Styles
.container {
display: flex;
}
@import '~bootstrap/scss/bootstrap';
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development --progress true --colors"
},
"author": "",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.2.1"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"autoprefixer": "^9.4.6",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"filemanager-webpack-plugin": "^2.0.5",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
}
}
postcss.config.js:
module.exports={
plugins: [
require('autoprefixer')({
'browsers': [
'>= 1%',
'last 1 major version',
'not dead',
'Chrome >= 45',
'Firefox >= 38',
'Edge >= 12',
'Explorer >= 10',
'iOS >= 9',
'Safari >= 9',
'Android >= 4.4',
'Opera >= 30'
],
cascade: true
})
]
};
webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = function() {
return ({
entry: {
'vendor': './src/js/vendor.js',
'app': './src/js/app.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[chunkhash].js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
}, {
loader: 'css-loader',
}, // translates CSS into CommonJS
{
loader: 'postcss-loader',
}, // Add vendor prefixes on build css file
{
loader: 'sass-loader',
} // compiles Sass to CSS
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash].css'
}),
// Before Build
new FileManagerPlugin({
onStart: {
delete: [
'dist',
],
}
}),
]
});
};
Zip file.
So you want vendor prefixes don't add on Webpack generated vendor.css file.
Remember Webpack parse loader array on reverse order. You could add exclude property on the object of postcss-loader with the regular expression.
webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = function() {
return ({
entry: {
'vendor': './src/js/vendor.js',
'app': './src/js/app.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[chunkhash].js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.s(c|a)ss$/,
use: {
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},// Take scss file and split into a separate css file
},
{
test: /\.s(c|a)ss$/,
use: {
loader: 'css-loader',
},// Interprets scss @import and url() like import/require()
},
{
test: /\.s(c|a)ss$/,
exclude: [/vendor/],
use: {
loader: 'postcss-loader',
},
}, // PostCSS turns your SCSS file into a JS object & converts that object back to a SCSS file
{
test: /\.s(c|a)ss$/,
use: {
loader: 'sass-loader',
},// look for scss file through sass-loader, compile scss into css code
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash].css'
}),
// Before Build
new FileManagerPlugin({
onStart: {
delete: [
'dist',
],
}
}),
]
});
};
这篇关于排除webpack中的一些css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
