Как расширить nuxt.config.js, чтобы добавить стилус-загрузчик и css-загрузчик в мое приложение nuxt? - PullRequest
Новая
       9

Как расширить nuxt.config.js, чтобы добавить стилус-загрузчик и css-загрузчик в мое приложение nuxt?

0 голосов
/ 10 сентября 2018

Я хочу добавить загрузчик CSS в мой проект Nuxt.js, добавив следующее (как указано в ссылке на документацию) webpack.config.js : 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

Я также прочитал в официальной документации Nuxt.js , как расширить webpack.config.js для приложения Nuxt.js, просто изменив nuxt.config. js файл выглядит следующим образом: 

module.exports = {
  build: {
     extend (config, { isDev, isClient }) {
       // ...
     }
  }
}

Но когда я открываю nuxt.config.js , я нахожу этот фрагмент на месте: 

extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/,
        })
      }
    }

Учитывая эту информацию (и мои ограниченные знания настроек этого стека, для которого я новичок), я сделал это - что, похоже, работает: 

extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          test: /\.css$/,
          loader: 'eslint-loader',
          loader: 'stylus-loader',
          loader: 'css-loader',
          exclude: /(node_modules)/,
        })
      }
    }

Когда я запускаю свой проект: npm run dev, все в порядке; это также нормально, когда я обновляю свою страницу, но я замечал, что когда я открываю инструменты разработки в Chrome и обновляю страницу, я получаю эту ошибку: 

nuxt:render Rendering url /material-design-icons.css.map +225ms
{ statusCode: 404,
  path: '/material-design-icons.css.map',
  message: 'This page could not be found' }

Проблема в том, что я уже установил на что Nuxt жалуется: 

npm install material-design-icons-iconfont --save

Я также установил css-stylus и stylus-loader, используя npm.

Я хочу сообщить, что я импортирую эти шрифты значков в my_project / store / index.js : 

import 'material-design-icons-iconfont/dist/material-design-icons.css'

Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Вам не нужно добавлять загрузчик css и стилуса в nuxt, потому что они уже есть.

Что касается вашей ошибки -> она жалуется на css.map, а не на css. В основном это не может найти файл карты. Вы можете отключить карту CSS, и она должна исчезнуть, но это всего лишь предупреждение, вызванное инструментами разработчика, которые ищут карту источника CSS 

  build: {
    cssSourceMap: false,
0 голосов
/ 10 сентября 2018

В вашем файле nuxt.config.js вы неправильно вводите новые правила. У вас есть два правила, соединенные вместе. Их нужно нажимать отдельно - один для файлов .js и .vue и один для файлов .css. 

extend (config, { isDev, isClient }) {
  if (isDev && isClient) {
    config.module.rules.push({
      test: /\.(js|vue)$/,
      enforce: 'pre',
      loader: 'eslint-loader',
      exclude: /(node_modules)/
    });
    config.module.rules.push({
      test: /\.css$/,
      loader: ['css-loader', 'stylus-loader'],
      exclude: /(node_modules)/
    });
  }
}
...