Создание статических файлов CSS с помощью webpack

В настоящее время я разрабатываю приложение, которое использует разные темы интерфейса. Этими темами являются только CSS-файлы, которые могут быть выбраны пользователем.Создание статических файлов CSS с помощью webpack

Технически эти темы .scss-файлы, которые составитель WebPack и загружены через стандартную ссылку тег в угловом:

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

Моя раздели WebPack конфигурация выглядит следующим образом:

theme1CssExtractor = new ExtractTextPlugin('themes/theme-1.css'),  
theme2CssExtractor = new ExtractTextPlugin('themes/theme-2.css'),  

module.exports = new WebpackConfig().merge({ 

entry: { 
    app: [ 
     './app/main.ts', 
     './assets/sass/themes/theme-1.scss', 
     './assets/sass/themes/theme-2.scss' 
    ], 
}, 

output: { 
    path: "build/", 
    filename: "[name].bundle.js", 
    publicPath: "/build/" 
}, 

plugins: [ 
    theme1CssExtractor, 
    theme2CssExtractor, 
], 

module: { 
    loaders: [ 
     { 
      test: /\.ts$/, 
      loaders: ['awesome-typescript-loader'] 
     }, 
     [ 
      { 
       test: /theme-1\.scss$/, 
       include: path.resolve(__dirname, "assets/sass/themes"), 
       loader: theme1CssExtractor.extract(
        "style", 
        "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib') 
       ) 
      }, 
      { 
       test: /theme-2\.scss$/, 
       include: path.resolve(__dirname, "assets/sass/themes"), 
       loader: theme2CssExtractor.extract(
        "style", 
        "css!sass?includePaths[]=" + path.resolve(__dirname, './node_modules/compass-mixins/lib') 
       ) 
      } 
     ] 
    ] 
}

Это работает отлично, пока я не хочу использовать webpack-dev-сервер с включенной функцией замены модуля (HMR), потому что extractTextPlugin не поддерживает HMR. Когда я просто отключу extractTextPlugin (options.disable) или удаляю их, все темы скомпилируются в основной модуль, и это - из cource-breaks темы, потому что все они применяются вместе.

Как я могу сгенерировать эти CSS-файлы непосредственно с помощью webpack без использования extractTextPlugin? Я пробовал различные попытки с различными enntries/chunks, файловыми загрузчиками ... но ничего действительно не работает.

Это должно быть просто: создать статические CSS-файлы из SCSS-файлов без преобразования их в JS-файлы без использования ExtractTextPlugin.

Было бы здорово, если бы кто-то мог указать мне в правильном направлении.

источник

2015-10-28 Cornelius Schmale

Одним из подходов может быть организовать свой Webpack конфигурации в том, что он уважает различные режимы:

развития: не используйте ExtractTextPlugin (см позже о проблеме с одним файлом, который включает в себя все)
производства: использование ExtractTextPlugin как вы делаете прямо сейчас

вы можете посмотреть на то, как это делается в este.

Что касается проблемы, у вас есть без ExtractTextPlugin (один файл, который содержит все темы): это происходит потому, что ваша конфигурация содержит как theme-1.scss и theme-2.scss в качестве точки входа в «приложении» кусок, так Webpack помещает их вместе (один кусок). Вы можете попробовать пойти другой путь: исключить их из списка точек входа, а также добавить в исходном коде что-то вроде:

require('../assets/sass/themes/' + theme + '.scss');

В этом случае в режиме разработки, вы получите только один модуль (тема) загруженного в зависимости от значения переменной «тема». И в режиме производства Webpack будет проходить через все файлы в «assets/sass/themes /» (конкретное поведение Webpack, когда «require» содержит выражение), включая их как модули, а затем ExtractTextPlugin будет обрабатывать их извлечение (так что у вас нет сделать что-нибудь здесь).

Существует некоторая сложная часть о том, как тогда в производстве загружается конкретная тема (потому что «требуется», которое у вас есть в коде, ничего не сделает, ExtractTextPlugin оставит соответствующие модули пустым), поэтому вам нужно поместить некоторый код который добавляет <link> к <head> вашего HTML. И в то же время этот код не должен вызываться в режиме разработки.Один грязный хак, который может помочь достичь его:

if (!__DEV__) { 
    // do adding <link> to the <head> 
}

(смотри также в Эсте, например, как DefinePlugin может быть использован для определения __DEV__ переменной).

Мне действительно интересно, как это можно было бы решить в лучшем случае ...

источник

2015-10-30 00:23:39

Создание статических файлов CSS с помощью webpack

ответ

Смежные вопросы