Webpack 将 scss 编译为 css 并缩小
Posted
技术标签:
【中文标题】Webpack 将 scss 编译为 css 并缩小【英文标题】:Webpack compile scss to css and minify 【发布时间】:2019-12-05 23:08:42 【问题描述】:我是 webpack 的新手,我正在努力如何将 scss 转换为 css 然后缩小。
文件结构
????public
┣ ????dist
┃ ┣ ????css
┃ ┗ ????js
┃ ┃ ┗ ????adminMain.js
┣ ????src
┃ ┣ ????css
┃ ┃ ┃ ┣ ????admin.css
┃ ┃ ┃ ┣ ????admin.css.map
┃ ┃ ┃ ┣ ????admin.scss
┃ ┃ ┃ ┣ ????main.css
┃ ┃ ┃ ┣ ????main.css.map
┃ ┃ ┃ ┗ ????main.scss
┃ ┗ ????js
┃ ┃ ┗ ????adminMain.js
我是这样编译js的
"dev": "webpack --mode development ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js",
"build": "webpack --mode production ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js"
我找到了 sass-loader
之类的东西,但无法让它工作。
webpack.config.js
module.exports =
module:
rules: [
test: /\.scss$/,
use: [
loader: "sass-loader",
options:
minimize: true
]
]
;
我不知道在哪里放置包含文件的路径以及在哪里放置输出路径。
如果您有任何建议,我将不胜感激。
【问题讨论】:
显示您的webpack.config.js
,到目前为止您尝试了什么?使用sass-loader
有什么问题?
@GProst 感谢您的评论。添加到原帖中。
【参考方案1】:
如果您只是希望能够从您的 javascript 模块中导入 .scss
文件并将其直接应用于 DOM,您可以先按照此文档进行操作:
https://webpack.js.org/loaders/sass-loader/
然后将Postcss
添加到组合中:
https://github.com/postcss/postcss-loader
tldr;
npm install sass-loader node-sass style-loader css-loader postcss-loader cssnano --save-dev
// webpack.config.js
module.exports =
module:
rules: [
test: /\.scss$/,
use: [
'style-loader', // creates style nodes from JS strings
loader: 'css-loader', // translates CSS into CommonJS
options:
importLoaders: 1
,
'postcss-loader', // post process the compiled CSS
'sass-loader' // compiles Sass to CSS, using Node Sass by default
]
]
;
// postcss.config.js
module.exports =
plugins:
'cssnano':
;
如果要将编译后的 CSS 提取到单独的文件中,有:
https://github.com/webpack-contrib/mini-css-extract-plugin
特别是:
https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example
【讨论】:
这就像我的推荐【参考方案2】:你可以使用我的配置来做到这一点。我正在使用optimize-css-assets-webpack-plugin
你可以查看我的完整配置here
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
process.traceDeprecation = true;
module.exports =
output:
path: path.resolve(__dirname, "wwwroot/dist"),
filename: "[name].js",
publicPath: "/dist/"
,
optimization:
minimizer: [
new UglifyJsPlugin(
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions:
compress: true,
output: null
),
new OptimizeCSSAssetsPlugin(
cssProcessorOptions:
safe: true,
discardComments:
removeAll: true,
,
,
)
]
,
plugins: [
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /jsx$/),
new webpack.LoaderOptionsPlugin(
options:
),
new MiniCssExtractPlugin(
filename: "[name].css",
chunkFilename: "[id].css"
),
new webpack.ProvidePlugin(
$: "jquery",
jQuery: "jquery",
Popper: ['popper.js', 'default']
),
new CompressionPlugin(
test: /\.(js|css)/
),
new UglifyJsPlugin(),
new WebpackShellPlugin(
onBuildStart: ['echo "Starting postcss command"'],
onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
)
],
resolve:
modules: [
path.resolve('./React/js/App'),
path.resolve('./React/js/App/Modules/Client'),
path.resolve('./React/js/App/Modules/Adnmin'),
path.resolve('./node_modules')
]
,
module:
rules: [
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
loader: "css-loader",
options:
minimize: true,
sourceMap: true
,
loader: "sass-loader"
]
]
;
但我建议您使用 postcss 来缩小 css。我正在使用 WebpackShellPlugin 运行 minify 命令
【讨论】:
以上是关于Webpack 将 scss 编译为 css 并缩小的主要内容,如果未能解决你的问题,请参考以下文章