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

Я хочу добавить Загрузчик 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.

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

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

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

2
0
5 392
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В вашем файле 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)/
    });
  }
}

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

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

  build: {
    cssSourceMap: false,

Другие вопросы по теме