我想将我的 SCSS 文件编译为 main.min.css与网页包。我正在使用自动前缀器和最终文件未生成。我尝试了很多选择,但现在陷入困境。可能是什么?
基本上,我正在 root/src/styles/...scss 上进行开发,我需要在 root/css 中转译并创建一个名为 main.min.css 的缩小文件。
我的package.json:
{
"name": "rms",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --output-public-path=/js/new-theme/"
},
"keywords": [],
"author": "Rafael Perozin",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@material/tab-bar": "^3.1.0",
"@material/tab-scroller": "^3.1.0",
"autoprefixer": "^9.6.1",
"babel-loader": "^8.0.6",
"core-js": "^3.1.4",
"css-loader": "^3.1.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"postcss-cli": "^6.1.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"sass-loader": "^7.1.0",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": {
"@babel/runtime": "^7.5.5"
},
"browserslist": [
"last 2 versions",
"ie >= 8",
"edge >= 15",
"ie_mob >= 10",
"ff >= 45",
"chrome >= 45",
"safari >= 5",
"opera >= 23",
"ios >= 7",
"android >= 4",
"bb >= 10"
]
}
我的 webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: 'main.min.css'
}),
],
entry: {
script: './src/scripts/main.js',
style: './src/styles/main.scss'
},
output: {
path: path.resolve(__dirname, './js/new-theme'),
filename: 'main.min.js',
publicPath: './js/new-theme'
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
"presets": [
[
'@babel/preset-env',
{
"targets": {
"browsers": [
"last 2 versions",
"chrome >= 71",
"ie >= 11",
"ios >= 8",
"android >= 5",
"safari >= 10",
"firefox >= 61"
]
},
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": [
["@babel/transform-runtime"]
]
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
path: path.resolve(__dirname, './css/new-theme'),
publicPath: './css/new-theme'
}
},
{
loader: "css-loader",
options: {
import: true,
}
},
{
loader: "postcss-loader",
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')
]
}
},
{
loader: "sass-loader",
options: {}
}
]
}
]
}
}
运行时npm run build
显示没有错误,只是警告有关模式。
see the current error image: