Как я могу использовать sass в моем проекте React/webpack?

Question

Я имел эту работу до того, импортируя его с

import sass from '../scss/application.scss'; 

Is this the wrong type of import above?

Теперь его дает мне следующую ошибку ...

ERROR in ./app/components/Landing.js Module not found: Error: Can't resolve 'style' in '/Users/sam/Desktop/talkingwith/talkingwith' BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'style-loader' instead of 'style'. @ ./app/components/Landing.js 13:19-54 @ ./app/App.js @ multi (webpack)-dev-server/client? http://localhost:3333 ./app/App.js

Не знаю, как я могу использовать SASS в моих компонентов в настоящее время.

редактировать: мой WebPack файл

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var path = require('path'); 


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './app/App.js' 
    ], 
    output: { 
    path: __dirname + '/public', 
    filename: "bundle.js" 
    }, 
    plugins: [HTMLWebpackPluginConfig], 
    devServer: { 
     inline:true, 
     contentBase: './public', 
     port: 3333 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
     }, 
     { 
       test: /\.scss$/, 
       loader: 'style!css!sass' 
      }] 
    } 
}; 

Answer 1

Думал, что я вышлю решение, в котором я закончил, используя

{ 
    test: /\.scss$/, 
    loader: 'style-loader!css-loader!sass-loader' 
    } 

Answer 2

Попробуйте

@import '../scss/application'; 

и в WebPack конфигурации,

{ 
    test: /\.scss$/, 
    loaders: [ 
     'style', 
     'css', 
     'sass' 
    ] 
} 

Answer 3

Я не 100% уверен, что дерзость библиотека вы используете. Для меня очень хорошо работает библиотека node-sass вместе с sass-loader. https://github.com/jtangelder/sass-loader Также рекомендуется использовать загрузчик с загрузчиком css-загрузчиком и загрузчиком стиля. (как в моем примере ниже)

Используя sass-loader, ваш webpack.config.js будет выглядеть примерно так.

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var path = require('path'); 


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: [ 
    './app/App.js' 
    ], 
    output: { 
    path: __dirname + '/public', 
    filename: "bundle.js" 
    }, 
    plugins: [HTMLWebpackPluginConfig], 
    devServer: { 
    inline:true, 
    contentBase: './public', 
    port: 3333 
    }, 
    module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: "babel-loader" 
    }, 
    { 
     test: /\.scss$/, 
     loaders: ["style-loader", "css-loader", "sass-loader"] 
    } 
    ] 
    } 
}; 

После ваших webpack.config.js обновлена, прежде всего, вам нужно сделать, это требует вашего .scss файла в вашей точке входа, файл расслоение плотной, в вашем случае App.js

require('path/to/your/style.scss');