Webpack - scssを別のCSSファイルにコンパイルするには？

Question

materialize.scss（他の多くのscssファイルをインポートします）のエントリを使用して別の出力 - materialize.min.cssファイルにコンパイルします。

ウェブパックとはどのように正確に対応していますか？

私は別のエラーを取得したいけれどもcssとともにextract-text-webpack-plugin、style、sassローダー、node-sass、resolve-url-loaderで百万異なるセットアップを試してみました、そして1を固定するだけで私は迷ってしまいました...ので、別のにつながります！

Answer 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、プロジェクト構造に基づいて変更パスです：GitHubの上

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') 
    ] 
}; 

とdemo project。

Answer 2

これは私が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 ] 
     } 
    } 
}