Почему моя конфигурация Webpack Sass не работает?

Я пытаюсь настроить загрузку Sass в моем проекте Webpack.Почему моя конфигурация Webpack Sass не работает?

Я установил node-sass, sass-loader, css-loader и style-loader, как вы можете видеть из моего package.json зависимостей:

//... 
"dependencies": { 
    "babel-core": "^6.14.0", 
    "babel-loader": "^6.2.5", 
    "babel-preset-es2015": "^6.14.0 
    "babel-preset-react": "^6.11.1" 
    "express": "^4.14.0", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "webpack": "^1.13.2", 
    "webpack-dev-middleware": "^1.6 
}, 
"devDependencies": { 
    "css-loader": "^0.24.0", 
    "node-sass": "^3.8.0", 
    "sass-loader": "^4.0.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.2", 
    "webpack-validator": "^2.2.7" 
} 
//...

Я добавил загрузчик в webpack.config.js:

//... 
module: { 
    loaders: [ 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loaders: ['babel'], 
    }, 
    { 
     test: /\.scss$/, 
     loaders: ["style", "css", "sass"] 
    }, 
    ], 
}, 
//...

... и добавил это к моим main.js:

import '../stylesheets/main.scss';

Это SCSS файл включает в себя несколько простых, очевидных изменений цвета:

button { 
    background-color: red; 
    color: white; 
} 

body { 
    background-color: blue; 
}

При запуске сервера, я получаю этот вывод в конце:

[174] ./stylesheets/main.scss 1.02 kB {0} [built] 
    [175] ./~/css-loader!./~/sass-loader!./stylesheets/main.scss 250 bytes {0} [built] 
    [176] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built] 
    [177] ./~/style-loader/addStyles.js 7.15 kB {0} [built] 
webpack: bundle is now VALID.

который кажется чтобы предположить, что мой CSS обрабатывается соответствующим образом. Но в браузере нет никаких доказательств каких-либо CSS. На странице никаких изменений не видно, стили не видны в инспекторе. Я не уверен, что еще мне нужно искать.

Я пропустил важный шаг? Что еще я должен попытаться заставить его работать?

источник

2016-08-30 molgin

это не имеет никакого отношения к webpack, возможно, вы импортируете неправильный файл или в неподходящее место. –

@ZeRubeus Я не уверен, что вы имеете в виду. Как я могу импортировать нужный файл в нужном месте? Это очень маленький проект с одним JS-файлом, одним файлом HTML и одним SCSS-файлом, поэтому здесь не так много возможностей для того, какой файл импортировать где. – molgin

можете ли вы разместить свои файлы html и js, пожалуйста? –

Моя настройка CSS была верной. Эта проблема, по-видимому, была вызвана устаревшей копией bundle.js, оставшейся после более ранней ручной компиляции, которая была загружена вместо текущей версии на dev-сервере. Когда я удалил файл, он сразу сработал.

источник

2016-08-30 23:34:44 molgin

сказал u, не имеет ничего общего с webpack :) –

Почему моя конфигурация Webpack Sass не работает?

ответ

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