Webpack - 如何将 scss 编译成单独的 css 文件?
Posted
技术标签:
【中文标题】Webpack - 如何将 scss 编译成单独的 css 文件?【英文标题】:Webpack - how to compile scss into a separate css file? 【发布时间】:2017-03-14 09:04:37 【问题描述】:我想使用一个条目 - materialize.scss
(它导入许多其他 scss 文件)并将其编译成单独的输出 - materialize.min.css
文件。
我究竟如何使用 Webpack 做到这一点?
我用extract-text-webpack-plugin
以及css
、style
、sass
loader、node-sass
、resolve-url-loader
尝试了一百万种不同的设置,尽管我会遇到不同的错误,而修复一个只会导致另一个错误所以...我迷路了!
【问题讨论】:
Webpack 最初用于打包 JS,JS 模块需要样式。请分享你的JS。如果您只需要编译样式,您可以采用其他方式:npm 脚本或 gulp 我知道 Webpack 是什么,而且我很确定它能够完成这样的任务,而无需在 JS 中导入样式。提取文本 webpack 插件。 来自it's readme:It moves every require("style.css") in entry chunks into a separate css output file.
【参考方案1】:
这是我在尝试将 css 编译成单独文件时使用的 webpack.config.js 文件
|-- App
|-- dist
|-- src
|-- css
|-- header.css
|-- sass
|-- img
|-- partials
|-- _variables.scss
|-- main.scss
|--ts
|-- tsconfig.json
|-- user.ts
|-- main.js
|-- app.js
|-- webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCss = new ExtractTextPlugin("css/style.css");
var autoprefixer = (require("autoprefixer"))( browsers: ['last 2 versions'] );
var precss = require("precss");
var sugarss = require('sugarss');
var colormin = require('postcss-colormin');
var path = require("path");
module.exports =
entry:
app: ['./src/sass/main.scss', './src/main.js']
,
//devtool:"source-map",
output:
filename: "bundle.js",
path: path.resolve(__dirname,"dist"),
publicPath: "/dist/"
,
resolve:
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
,
module:
loaders:[
test:/\.s?(a|c)ss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("css!postcss!sass")
,/*
test:/\.css$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader", "postcss-loader","precss")
,*/
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
,
test: /\.ts$/,
loader: 'ts-loader'
]
,
plugins: [
new ExtractTextPlugin("bundle.css")
],
postcss: function()
return
plugins: [ autoprefixer, precss ]
【讨论】:
【参考方案2】:先决条件
css 加载器 节点-sass sass 加载器 样式加载器 extract-text-webpack-plugin$ npm install css-loader node-sass sass-loader style-loader extract-text-webpack-plugin --save-dev
webpack.config.js
这是我的演示webpack.config.js
,根据你的项目结构更改路径:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const srcPath = path.join(__dirname, 'src');
const dstPath = path.join(__dirname, 'dst');
const sassLoaders = [
'css-loader?minimize',
'sass-loader?indentedSyntax=sass&includePaths[]=' + srcPath
];
module.exports =
entry:
client: './src/js/client'
,
module:
loaders: [
/*README:https://github.com/babel/babel-loader*/
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query:
presets: ['react', 'es2015'],
cacheDirectory: true
,
plugins: ['transform-runtime']
,
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
,
test: /\.(png|jpg|bmp)$/,
loader: 'url-loader?limit=8192'
]
,
output:
path: dstPath,
filename: '[name].js'
,
plugins: [
new ExtractTextPlugin('[name].min.css')
]
;
还有 GitHub 上的 demo project。
【讨论】:
以上是关于Webpack - 如何将 scss 编译成单独的 css 文件?的主要内容,如果未能解决你的问题,请参考以下文章
Laravel 5.4 Webpack Mix - 合并SCSS和CSS