импортированные стили не нагруженные ExtractTextPlugin

Question

мои стили не загружаются, когда я использую следующий синтаксис

import '../styles/some-component.scss'; 

, но они будут загружаться при использовании модулей, как так (что имеет смысл, что они должны, так как у меня есть css-loadermodules опция устанавливается в true):

import '../styles/some-component.scss'; 
const className = styles.panel; 
// etc... 

расширить на вышесказанном, я загружаю стили в React компоненты, как так:

import React from 'react'; 
import '../styles/loading-overlay.scss'; 

const LoadingOverlay = ({ loadingMessage}) => { 
    return (<div className="loading-effect-overlay"> 
      <Blah loadingMessage={loadingMessage} /> 
     </div> 
    ); 
}; 

export default LoadingOverlay; 

Я знаю, что мог бы легко встраивать стили через import '!style-loader!css-loader!sass-loader!../styles/loading-overlay.scss';, но я хочу, чтобы они экспортировались в отдельный компонент css-файла.

Я использую Webpack 2.2.1 и распакуйте-Text-WebPack-Plugin 2.0.0-rc.3

Вот соответствующие (AFAIK) части WebPack конфигурации:

const extractScss = new ExtractTextPlugin({ 
    filename: '../css/components.css', 
    allChunks: true, 
    disable: enableDevServer 
}); 

// etc... 

config.module.rules.unshift({ 
    test: /\.scss$/, 
    loader: extractScss.extract({ 
     fallback: 'style-loader', 
     use: isProd ? 
      [ 
       { 
        loader: 'css-loader', 
        options: { 
         localIdentName: '[name]-[local]-[hash:base64:5]', 
         modules: true, 
         // TODO: should we be using the minimize option here? 
         // minimize: true, 
         importLoaders: 1 
        } 
       }, 
       'postcss-loader', 
       'sass-loader' 
      ] : 
      [ 
       { 
        loader: 'css-loader', 
        options: { 
         localIdentName: '[name]-[local]-[hash:base64:5]', 
         modules: true, 
         sourceMap: true, 
         importLoaders: 1 
        } 
       }, 
       'postcss-loader', 
       'sass-loader?sourceMap' 
      ] 
    }) 
}); 

любые идеи, почему это может не работать? любую дополнительную информацию, которую я должен предоставить?

Answer 1

Поскольку вы используете интеграцию CSS-модулей с React, тогда все ваши классы CSS будут преобразованы с использованием этого формата: [name] - [local] - [hash: base64: 5], где name - это имя компонента.

Попытка импортировать стили так:

import React from 'react'; 
import styles from './LoadingOverlay.module.css'; 

const LoadingOverlay = ({ loadingMessage}) => { 
    return (<div className={styles.overlay}> 
      <Blah loadingMessage={loadingMessage} /> 
     </div> 
    ); 
}; 

export default LoadingOverlay; 

И создать .overlay класс внутри вас LoadingOverlay.module.css файл. Обратите внимание, что CSS-модули - это метод интеграции CSS с модулями.

Если вы хотите объединить два разных метода, таких как CSS-модули и SASS, вы должны добавить два разных правила в webpack по одному на каждый. Что-то вроде этого (ключ включает правило, которое позволяет вам использовать разные правила для разных подпапок). Предположим, что у вас есть обычные файлы sss css под таблицами приложений/стилей и ваши модули css под приложением/src.

{ 
      test: /\.scss$/i, 
      include: resolve(__dirname, './../app/stylesheets'), 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: [ 
        { 
         loader: 'css-loader', 
         options: { 
          sourceMap: true, 
          importLoaders: 1, 
          minimize: true 
         } 
        }, 
        { 
         loader: 'postcss-loader' 
        }, 
        { 
         loader: 'sass-loader' 
        } 
       ] 
      }) 
     }, 
     { 
      test: /\.css$/i, 
      include: resolve(__dirname, './../app/src'), 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: [ 
        { 
         loader: 'css-loader', 
         options: { 
          sourceMap: true, 
          importLoaders: 1, 
          modules: true, 
          camelCase: true, 
          localIdentName: '[name]_[local]_[hash:base64:5]', 
          minimize: true 
         }, 
        }, 
        { 
         loader: 'postcss-loader' 
        } 
       ] 
      }) 
     } 

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