2 個答案:
答案 0 :(得分：3)
這是我在嘗試將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 ]
}
}
}
答案 1 :(得分：1)
前提條件
CSS-裝載機
節點SASS
SASS裝載機
式裝載機
提取物的文本的WebPack-插件
$ 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')
]
};
)
)
