Я использую Webpack 2.5.1, React 15.5.4.

Я пытаюсь использовать Bootstrap _utilities.scss в реактивном проекте. И Webpack сообщает об ошибке, когда я пытаюсь скомпилировать документ, потому что он импортирует другие sass-компоненты, используя оператор @import.

Это код моего входного документа main.jsx.

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/scss/_utilities.scss' // this is what causes the error
import '../stylesheets/components/gallery.scss'; // this one compiles properly if I comment the _utilities.scss import statement. It does not use @import notation.

class Gallery extends React.Component {
    render(){
    return (<div id="gallery" className="d-flex p-2">
            <h1>using bootstrap flex-box</h1>
            <p>Something something something!</p>
            <button onClick={() => console.info('You clicked a button')}>Click Me!</button>
        </div>)
    }
}  

Это код моего webpack.config.js.

const path = require('path');
const webpack = require('webpack');
const CommonChunkPlugin = 
require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
    target: 'web',
    watch: true,
    devtool: 'source-map',

    entry: {
        main: './components/main.jsx',
        vendor: ['react', 'react-dom']
    },

    output: {
        path: path.resolve('..', 'build', 'js'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.(css|scss)$/,
                exclude: /(node_modules)/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true }
                    }
                ]
            },
            {
                test: /(\.js|\.jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader?cacheDirectory=true',
                options: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },

    plugins: [
        new CommonChunkPlugin({
            name: 'vendor',
            filename: 'vendor.js'
        })
    ]
};  

Как видите, я использую style-loader, css-loader и sass-loader для компиляции файлов css и scss.

Это сообщение об ошибке, которое я получаю после запуска Webpack.

...  _utilities.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "utilities/align";
| @import "utilities/background";  ...  

Я видел этот пост и этот другой post , но они этого не делают Помогите.

Итак, я что-то не так делаю? Как я могу обойти это? Спасибо.

0
blaze 28 Май 2017 в 00:49

2 ответа

Лучший ответ

Вы исключаете каталог node_modules в качестве цели загрузчиков SASS / CSS, поэтому Webpack не сможет найти подходящий загрузчик для любого файла SASS, включенного оттуда.

Попробуйте удалить свойство exclude из настроек загрузчиков SASS / CSS.

0
Andrea Carraro 27 Май 2017 в 22:00

Вам нужен этот плагин

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractPlugin = new ExtractTextPlugin({
    filename: "main.css"
});

А потом просто положить

{
    test: /\.scss$/,
    use: extractPlugin.extract({
        use: ["css-loader","sass-loader"]
    })
}

И тогда в плагинах вам нужно это:

plugins:[extractPlugin]

Надеюсь, это поможет

0
Ivan 27 Май 2017 в 21:57