Загрузчик в стиле Webpack не может загружать модули sass - PullRequest
Новая
       75

Загрузчик в стиле Webpack не может загружать модули sass

0 голосов
/ 26 февраля 2020

У меня есть приложение реагирования, и я хочу иметь поддержку sass и css. Проблема в том, что когда я импортирую модули sass или css, они не применяются к тегам. Я имею в виду, посмотрите на приведенный ниже код, я хочу использовать стиль номер 2: 

import React from 'react';
import PropTypes from 'prop-types';
import style from './index.module.scss';
import { Header, Footer, Container } from '..';
import './style.scss'; // 1. this way is applying
import style from './style.scss'; // 2. this way is not applying



export const Layout = ({ children }) => (
  <div className="content"> // 1. this way is applying
    <Header />
    <Container>
      <div className={style.content}> // 2. this way is not applying
        {children}
      </div>
    </Container>
    <Footer />
  </div>
);

Layout.propTypes = {
  children: PropTypes.any.isRequired,
};

export default Layout;

, и это мой веб-пакет: 

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const cones = require('./cones.json');

module.exports = {
  mode: 'development',
  entry: './src/index',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CopyWebpackPlugin([{ from: 'public/index.html' }]),
  ],
  devServer: {
    port: 3000,
    contentBase: path.join(__dirname, './public'),
    hot: true,
    open: true,
    historyApiFallback: true,
    before(app) {
      app.get('/api/cones', (req, res) => {
        res.json(cones);
      });
    },
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss'],
  },
};

Я думаю, что-то не так с style-loader , который не может таким образом загрузить модуль стилей.

1 Ответ

1 голос
/ 26 февраля 2020

«Путь номер 2» называется CSS Модули . Чтобы использовать его, вам нужно включить modules в настройках css-loader. Посмотрите, работает ли это: 

{
  test: /\.s[ac]ss$/i,
  loader: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true,
      },
    },
    'sass-loader',
  ],
},
...