Webpack включает фреймворк основы и приложение scss для компиляции css

Question

Я хочу добавить компиляцию sass в свой проект и скомпилировать файл app.scss, включая стили сайтов-учредителей.

У меня есть структура проекта, как это:

-frontend 
    -node_modules 
    -src 
     -css 
     -scss 
     -js 
     index.html 
    package.json 
    webpack.config.js 

Я установил каркас фундамента по НПМ. Я хочу создать app.scss файл в моем каталоге, импорт СКС там основы фундамента и транслируют это в CSS/app.css, который связан в моем приложении index.html

Вот моя конфигурация WebPack:

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/index.js", 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], 
     } 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "index.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
}; 

Я установил в свои пакеты sass-loader, загрузчик стилей и css-загрузчик, но я понятия не имею, как правильно включить этот процесс в webpack.

Большое спасибо за помощь в этом.

Answer 1

Вы определенно находитесь на верном пути. Прежде всего, убедитесь, что у вас установлена ​​версия с установленной sass-библиотекой. Я лично использую node-sass с проектами webpack. Больше информации here. об узлом-сассе.

Также, чтобы скомпилировать ваш scss в папку css, вам понадобится использовать webpack extract-text-webpack-plugin, info here.

Требуется плагин в верхней части вашей конфигурации:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

После того, как вы установили плагин, можно использовать настроить загрузчик, как это:

module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'], 
      } 
     }, 
     { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("style-loader","css-loader!sass-loader"), 
     } 
    ] 
    }, 

И ваш плагин, как это:

plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new ExtractTextPlugin("./css/[name].css"), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 

Отсюда все, что вам нужно сделать, это указать ваш основной файл scss в вашей записи j s файл, который в вашем случае - index.js. Нечто подобное:

require('./path/to/app.scss'); 

Что касается аспекта основания я хотел бы посмотреть в этом https://www.npmjs.com/package/foundation-sites-loader. Это выглядит многообещающе.