css文件如何设置scss,Webpack - 如何将scss编译成单独的css文件？

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')

]

};