Webpack - как скомпилировать scss в отдельный файл css?

Question

Я хочу использовать запись - materialize.scss (которая импортирует много других файлов scss) и скомпилировать ее в отдельный вывод - файл materialize.min.css.

Как я могу это сделать с помощью Webpack?

Я попробовал миллион различных установок с extract-text-webpack-plugin вместе с css, style, sass погрузчик, node-sass, resolve-url-loader хотя я получаю различные ошибки, и фиксируя один раз ведет к другому так ... Я потерял!

Answer 1

Предпосылка

• CSS-погрузчик
• узел дерзость
• дерзость-погрузчик
• стиль-погрузчик
• экстракт текст 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') 
    ] 
}; 

И demo project на GitHub.

Answer 2

Это файл webpack.config.js, который я использовал, когда я пытался скомпилировать CSS в отдельный файл

|-- 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 ] 
     } 
    } 
}